我想爲我的React.js + Redux項目編寫測試,使用webpack2來捆綁一切,我想用Karma + mocha作爲我的測試跑步者。我設法按順序得到我的webpack.conf.js
和karma.conf.js
文件,並運行簡單的測試(以及編譯我的包),但無論何時測試有...
運算符或import
關鍵字,karma似乎都會窒息。Karma + Webpack2:模塊解析失敗,導入沒有找到
我的項目結構相當簡單;配置文件住在該項目的/
,反應文件生活在/components/
和測試(命名爲*.test.js
)住/tests/
。每當我有一個測試用...
我收到以下錯誤:
Error: Module parse failed: /....../components/actions.jsx Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| module.exports = {
| ...generatorActions,
| ...creatorActions
| }
at test/actions/actions.test.js:1088
如果我刪除...
,但留下的import語句,我得到:
ERROR in ./components/actions.jsx
Module not found: Error: Can't resolve 'creatorActions' in '/..../components'
@ ./components/actions.jsx 2:0-43
@ ./test/actions/actions.test.js
Firefox 53.0.0 (Mac OS X 10.12.0) ERROR
Error: Cannot find module "generatorActions"
at test/actions/actions.test.js:1090
以供參考,該文件actions.jsx
樣子這樣的:
import generatorActions from 'generatorActions'
import creatorActions from 'creatorActions'
module.exports = {
...generatorActions,
...creatorActions
}
和actions.test.js
看起來是這樣的:
const expect = require('expect')
const actions = require('../../components/actions.jsx')
describe('Actions',() => {
it('Should exist',() => {
expect(actions).toExist()
})
})
一個奇怪的事情,我不明白的是,錯誤消息(1088和1090)中的行不能對應於香草文件,所以我只能假設它們對應於生成的webpack包 - 所以我相信webpack正在被調用。如果我完全評論actions.jsx
的虛假測試的內容,我已經通過了(一個簡單的測試聲稱expect(1).toBe(1)
)。這裏是我的webpack.config.js
:
function buildConfig(env) {
return require('./build/webpack/webpack.' + (env || 'dev') + '.config.js');
}
module.exports = buildConfig;
而且我webpack.dev.config.js
的樣子:
var path = require('path');
var webpack = require('webpack');
const appRoot = require('app-root-path').path
module.exports = {
context: path.resolve(appRoot, 'components'),
devtool: 'eval',
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
entry: {
app: './App.jsx',
},
output: {
path: path.resolve(appRoot, 'public/'),
filename: '[name].js'
},
resolve: {
modules: [
path.resolve(appRoot, "components"),
path.resolve(appRoot, "components/common"),
path.resolve(appRoot, "components/common/presentational"),
path.resolve(appRoot, "components/common/components"),
path.resolve(appRoot, "components/creator"),
path.resolve(appRoot, "components/creator/actions"),
path.resolve(appRoot, "components/creator/reducers"),
path.resolve(appRoot, "components/creator/presentational"),
path.resolve(appRoot, "components/creator/components"),
path.resolve(appRoot, "components/generator"),
path.resolve(appRoot, "components/generator/presentational"),
path.resolve(appRoot, "components/generator/stateful"),
path.resolve(appRoot, "components/generator/actions"),
path.resolve(appRoot, "components/generator/reducers"),
path.resolve(appRoot, "node_modules")
],
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
["es2015", {modules: false}],
'react',
'stage-0',
[
"env", {"targets": {"browsers": ["last 2 versions"]}}
]
],
plugins: [
'syntax-dynamic-import',
'transform-async-to-generator',
'transform-regenerator',
'transform-runtime',
'babel-plugin-transform-object-rest-spread'
]
}
}
]
}
}
和我karma.conf
const webpackConfig = require('./webpack.config.js');
module.exports = function(config) {
config.set({
browsers: ['Firefox'],
singleRun: true,
frameworks: ['mocha'],
files: [
'test/**/*.test.js'
],
preprocessors: {
'test/**/*.js': ['webpack'],
'components/**/*.js': ['webpack'],
'components/*.js': ['webpack']
},
reporters: ['mocha'], //, 'coverage', 'mocha'],
client:{
mocha:{
timeout: '5000'
}
},
webpack: webpackConfig,
webpackServer:{
noInfo: true
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
concurrency: Infinity
})
}
這對我來說非常有幫助!雖然在我的情況下,我不必使用'require'作爲函數。謝謝! –