Karma + Webpack2：模块解析失败，导入没有找到

Question

我想为我的React.js + Redux项目编写测试，使用webpack2来捆绑一切，我想用Karma + mocha作为我的测试跑步者。我设法按顺序得到我的webpack.conf.js和karma.conf.js文件，并运行简单的测试（以及编译我的包），但无论何时测试有...运算符或import关键字，karma似乎都会窒息。

我的项目结构相当简单;配置文件住在该项目的/，反应文件生活在/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 
    }) 
} 

Answer 1

我终于想通了！我所需要做的就是将const webpackConfig = require('./webpack.config.js');行更改为const webpackConfig = require('./webpack.config.js')();我的karma.conf.js