javascript - Karma + Webpack2:模块解析失败并且找不到导入

我正在尝试使用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

如果删除...，但保留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
  })
}

最佳答案

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

关于javascript - Karma + Webpack2:模块解析失败并且找不到导入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44220886/