7
我有一個ES6項目，我使用webpack將客戶端代碼轉換爲ES5。該項目在客戶端使用ReactJS，因此單元測試自然使用React TestUtils。在最近的更新（0.14）中，React changed how several modules are imported（包括TestUtils）。我想更新，但我無法弄清楚如何在更改導入之後使單元測試工作。模塊未找到：錯誤：無法解析模塊'react-addons-test-utils'
當我嘗試運行測試，我得到以下信息：
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
在我tests_auth.jsx和test_modal.jsx文件，我開始下面的進口：
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
的測試腳本在我的package.json中是：
PHANTOMJS_BIN=./node_modules/.bin/phantomjs && ./node_modules/karma/bin/karma start karma.config.js
我的相關依賴關係是：
"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"
}
我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'
]
});
};
最後，我的文件結構看起來是這樣的：
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
我已清楚什麼配置錯了，但我有很難弄清楚它是什麼。有沒有人遇到類似的問題？更熟悉Karma，Webpack或React 0.14的人是否知道我的錯誤？