Ho un progetto ES6 in cui utilizzo webpack per convertire il codice client in ES5. Il progetto utilizza ReactJS sul lato client, quindi, naturalmente, i test unitari utilizzano il test React TestUtils. Nell'ultimo aggiornamento (0.14), React changed how several modules are imported (inclusi TestUtils). Voglio aggiornare, ma non riesco a capire come fare funzionare i test unitari dopo aver cambiato le importazioni.Modulo non trovato: Errore: impossibile risolvere il modulo 'react-addons-test-utils'
Quando si tenta di eseguire i test, ottengo i seguenti messaggi:
04 12 2015 12:40:48.038:ERROR [karma]: { [Error: no such file or directory]
code: 'ENOENT',
errno: 34,
message: 'no such file or directory',
path: '/_karma_webpack_/public/test/main.js' }
Error: no such file or directory
at MemoryFileSystem.readFileSync (<project>/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
at MemoryFileSystem.readFile (<project>/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21)
at doRead (<project>/node_modules/karma-webpack/index.js:156:26)
at Plugin.readFile (<project>/node_modules/karma-webpack/index.js:160:3)
at doNTCallback0 (node.js:419:9)
at process._tickCallback (node.js:348:13)
Hash: dee787e2bee8303745db
Version: webpack 1.12.9
Time: 3657ms
Asset Size Chunks Chunk Names
public/test/main.js 1.71 MB 0 public/test/main.js
5044d04bf14a5de57d08.hot-update.json 35 bytes
chunk {0} public/test/main.js (public/test/main.js) 1.6 MB [rendered]
[0] ./public/test/main.js 176 bytes {0} [built]
[1] ...
ERROR in ./public/test/common/test_modal.jsx
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in <project>/public/test/common
@ ./public/test/common/test_modal.jsx 13:28-62
ERROR in ./public/test/pages/test_auth.jsx
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in <project>/public/test/pages
@ ./public/test/pages/test_auth.jsx 17:28-62
Nel mio tests_auth.jsx e file test_modal.jsx, comincio le seguenti importazioni:
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
I script di prova nel mio package.json è:
PHANTOMJS_BIN=./node_modules/.bin/phantomjs && ./node_modules/karma/bin/karma start karma.config.js
mie dipendenze rilevanti sono:
"devDependencies": {
"chai": "^3.4.1",
"chai-as-promised": "^5.1.0",
"coveralls": "^2.11.4",
"karma": "^0.13.9",
"karma-chai": "^0.1.0",
"karma-chai-as-promised": "^0.1.2",
"karma-chai-plugins": "^0.6.1",
"karma-coverage": "^0.5.2",
"karma-mocha": "^0.2.0",
"karma-phantomjs-launcher": "^0.2.1",
"karma-sinon-chai": "^1.0.0",
"karma-webpack": "^1.7.0",
"mocha": "^2.3.3",
"phantomjs": "^1.9.18",
"react-hot-loader": "^1.3.0",
"webpack-dev-server": "^1.10.1"
},
"dependencies": {
"react": "0.14.3",
"react-dom": "0.14.3",
"webpack": "^1.12.1"
}
miei karma.config.js è:
var webpack = require('webpack');
module.exports = function(config) {
'use strict';
config.set({
files: [
'./public/test/polyfill.js',
'./public/test/main.js'
],
preprocessors: {
'./public/test/main.js': [
'webpack'
]
},
browsers: [
'PhantomJS'
],
frameworks: [
'mocha',
'sinon-chai',
'chai-as-promised',
'chai'
],
reporters: [
'progress',
'coverage'
],
coverageReporter: {
dir: 'coverage/',
reporters: [
{
type: 'lcovonly',
subdir: '.',
file: 'lcov.info'
}, {
type: 'html',
subdir: 'html'
}
]
},
webpack: {
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader?stage=0'
}
]
},
resolve: {
extensions: [
'',
'.js',
'.jsx'
],
modulesDirectories: [
'node_modules',
'public/src',
'public/test'
]
}
},
webpackMiddleware: {
noInfo: true
},
singleRun: true,
plugins: [
'karma-mocha',
'karma-webpack',
'karma-coverage',
'karma-sinon-chai',
'karma-chai',
'karma-chai-plugins',
'karma-chai-as-promised',
'karma-phantomjs-launcher'
]
});
};
Infine, la mia struttura dei file sembra qualcosa di simile:
karma.config.js
package.json
node_modules/
public/
app.js
index.html
src/
main.jsx
test/
main.js
polyfill.js
pages/
test_auth.jsx
common/
test_modal.jsx
ho chiaramente avere qualcosa configurato sbagliato, ma io sto avendo un sacco di problemi a capire di cosa si tratta. Qualcuno ha riscontrato un problema simile? Qualcuno ha più familiarità con Karma, Webpack o React 0.14 sa cosa ho sbagliato?