我有一个 ES6 项目,我在其中使用 webpack 将客户端代码转换为 ES5。该项目在客户端使用 ReactJS,因此自然地,单元测试使用 React TestUtils。在最近的更新(0.14)中,React改变了几个模块的导入方式(包括 TestUtils)。我想更新,但我不知道如何在更改导入后使单元测试工作。
当我尝试运行测试时,我收到以下消息:
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 的人知道我做错了什么吗?