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

Question

我正在尝试使用 webpack2 为我的 React.js + Redux 项目编写测试来捆绑所有内容，我想使用 Karma + mocha 作为我的测试运行器。我已经设法让我的 webpack.conf.js 和 karma.conf.js 文件按顺序排列和运行简单测试（以及编译我的包），但是每当测试有 ... 运算符或 import 关键字。

我的项目结构相当简单；配置文件位于项目的 / 中，反应文件位于 /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

如果我删除 ...，但保留导入语句，我得到：

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

我终于明白了！我需要做的就是将 karma.conf.js

中的行 const webpackConfig = require('./webpack.config.js'); 更改为 const webpackConfig = require('./webpack.config.js')();

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

Karma + Webpack2: module parse failed and imports not found

javascript

mocha.js

reactjs

karma-mocha

webpack-2