Karma + Webpack2: module parse failed and imports not found

Question

I'm trying to write tests for my React.js + Redux project using webpack2 to bundle everything and I'd like to use Karma + mocha as my test runners. I have managed to get my webpack.conf.js and karma.conf.js files in order and running simple tests (as well as compiling my bundle), however karma seems to choke whenever a test has a ... operator or the import keyword.

My project structure is fairly simple; config files live in / of the project, react files live in /components/ and tests (named *.test.js) live in /tests/. Whenever I include a test with ... I get the following error:

 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

If I remove the ..., but leave the import statements, I get:

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

For reference, the file actions.jsx looks like this:

import generatorActions from 'generatorActions'
import creatorActions from 'creatorActions'

module.exports = {
  ...generatorActions,
  ...creatorActions
}

and actions.test.js looks like this:

const expect = require('expect')

const actions = require('../../components/actions.jsx')

describe('Actions', () => {
  it('Should exist', () => {
    expect(actions).toExist()
  })
})

A strange thing that I don't understand is that the lines in the error messages(1088 and 1090) can't correspond to the vanilla files, so I can only assume that they correspond to the generated webpack bundle - so I believe webpack is being invoked. If I completely comment out the contents of actions.jsx the dummy test I have passes (a simple test asserting expect(1).toBe(1)). Here's my webpack.config.js:

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

module.exports = buildConfig;

And my webpack.dev.config.js looks like:

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'
            ]
          }
        }
      ]
    }
  }

and my 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

I finally figured it out! All I needed to do was change the line const webpackConfig = require('./webpack.config.js'); to const webpackConfig = require('./webpack.config.js')(); in my karma.conf.js