カルマ+ Webpack2：モジュールの解析に失敗し、インポートが見つかりません

Question

私はReact.js + Reduxプロジェクトのテストをwebpack2を使ってすべて書き込むことを試みています。私はテストランナーとして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だ：私はついにそれを考え出し

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

：

function buildConfig(env) { 
    return require('./build/webpack/webpack.' + (env || 'dev') + '.config.js'); 
} 

module.exports = buildConfig; 

そして、私のwebpack.dev.config.jsのように見えます！私がする必要があったのは、const webpackConfig = require('./webpack.config.js');をconst webpackConfig = require('./webpack.config.js')();に変更することでした。karma.conf.js