Matt
Matt

Reputation: 8942

Mocha tests with Karma, Webpack

I have a React project and use Webpack 1.13.1 to bundle my code. I want to write some tests in 3.0.2 and run these tests in a browser using Karma 1.2.0. I tried to use karma-webpack plugin, but if I run tests I get following errors in console:

WARNING in ./~/mocha/lib/mocha.js
Critical dependencies:
        151:20-37 the request of a dependency is an expression
183:17-30 the request of a dependency is an expression
220:26-39 the request of a dependency is an expression
@ ./~/mocha/lib/mocha.js 151:20-37 183:17-30 220:26-39

WARNING in ./~/mocha/lib/interfaces/bdd.js.orig
Module parse failed: /my_proj/node_modules/mocha/lib/interfaces/bdd.js.orig Unexpected token (93:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (93:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseBlock (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24)
at Parser.pp$1.parseFunction (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1810:19)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/mocha.js.orig
Module parse failed: /my_proj/node_modules/mocha/lib/mocha.js.orig Unexpected token (499:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (499:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseBlock (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24)
at Parser.pp$1.parseFunction (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1810:19)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/runnable.js.orig
Module parse failed: /my_proj/node_modules/mocha/lib/runnable.js.orig Unexpected token (316:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (316:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseBlock (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24)
at Parser.pp$1.parseFunction (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1810:19)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/runner.js.orig
Module parse failed: /my_proj/node_modules/mocha/lib/runner.js.orig Unexpected token (5:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (5:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/my_proj/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/my_proj/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/my_proj/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/suite.js.orig
Module parse failed: /my_proj/node_modules/mocha/lib/suite.js.orig Unexpected token (60:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (60:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseBlock (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24)
at Parser.pp$1.parseFunction (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10)
at Parser.pp$1.parseFunctionStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:818:17)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:694:19)
at Parser.pp$1.parseTopLevel (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/template.html
Module parse failed: /my_proj/node_modules/mocha/lib/template.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/my_proj/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/my_proj/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/my_proj/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/test.js.orig
Module parse failed: /my_proj/node_modules/mocha/lib/test.js.orig Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (6:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/my_proj/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/my_proj/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/my_proj/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/utils.js.orig
Module parse failed: /my_proj/node_modules/mocha/lib/utils.js.orig Unexpected token (485:0)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (485:0)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseSwitchStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:873:36)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:700:34)
at Parser.pp$1.parseBlock (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24)
at Parser.pp$1.parseFunction (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10)
at Parser.pp$1.parseFunctionStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:818:17)
@ ./~/mocha/lib ^\.\/.*$

WARNING in ./~/mocha/lib/to-iso-string/LICENSE
Module parse failed: /my_proj/node_modules/mocha/lib/to-iso-string/LICENSE Unexpected token (1:14)
You may need an appropriate loader to handle this file type.
        SyntaxError: Unexpected token (1:14)
at Parser.pp$4.raise (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp.semicolon (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61)
at Parser.pp$1.parseExpressionStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10)
at Parser.pp$1.parseStatement (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24)
at Parser.pp$1.parseTopLevel (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/my_proj/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/my_proj/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/my_proj/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/my_proj/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/my_proj/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /my_proj/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/my_proj/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /my_proj/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
@ ./~/mocha/lib ^\.\/.*$

ERROR in ./~/mocha/~/growl/lib/growl.js
Module not found: Error: Cannot resolve module 'fs' in /my_proj/node_modules/mocha/node_modules/growl/lib
@ ./~/mocha/~/growl/lib/growl.js 8:9-22

ERROR in ./~/mocha/~/growl/lib/growl.js
Module not found: Error: Cannot resolve module 'child_process' in /my_proj/node_modules/mocha/node_modules/growl/lib
@ ./~/mocha/~/growl/lib/growl.js 7:11-35

ERROR in ./~/mocha/~/mkdirp/index.js
Module not found: Error: Cannot resolve module 'fs' in /my_proj/node_modules/mocha/node_modules/mkdirp
@ ./~/mocha/~/mkdirp/index.js 2:9-22
webpack: bundle is now VALID.

karma.config.js

// Karma configuration
// Generated on Wed Aug 24 2016 11:34:59 GMT+0200 (CEST)

var webpack = require('karma-webpack');
var webpackConfig = require('./webpack.karma.js');

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'requirejs'],

    // list of files / patterns to load in the browser
    files: [
      'src/script/*.js',
      'test/*.js'
    ],

    // list of files to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'src/script/*.js': ['webpack'],
        'test/*.js': ['webpack']
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    webpack: webpackConfig
  })
};

webpack.karma.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:5000',
        './src/script/index.jsx'
    ],
    output: {
        path: __dirname,
        filename: '[name].js',
        publicPath: '/static/'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        root: path.resolve(path.join(__dirname, 'src')),
    },
    devtool: 'eval-source-map',
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            loader: 'babel-loader',
            exclude: /(node_modules|other_modules)/
        },
        {test: /\.css$/, loaders: ['style', 'css']},
        {test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass']},
        {test: /\.less$/, loaders: ['style', 'css', 'less']},
        {test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]" },
        {test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]" },
        {test: /\.(eot|ttf|svg|gif|png|ico)$/, loader: "file-loader"}
        ]
    }
};

package.js

{
  "name": "exp-track",
  "version": "1.0.0",
  "description": "Exp-track",
  "main": "index.jsx",
  "scripts": {
    "e2e": "./nightwatch --test ./test/e2e.js",
    "test": "mocha --grep ./e2e.js --invert --compilers js:babel-register -R spec --ui bdd --timeout 7000",
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090",
    "karma": "./node_modules/karma/bin/karma start karma.conf.js"
  },
  "dependencies": {
    "animate.css": "^3.5.1",
    "axios": "^0.13.1",
    "bluebird": "^3.4.1",
    "bootstrap": "^3.3.7",
    "bootstrap-notify": "^3.1.3",
    "cookies-js": "^1.2.2",
    "events": "^1.1.1",
    "expose-loader": "^0.7.1",
    "firebase": "^3.3.0",
    "flux": "^2.1.1",
    "history": "^2.0.1",
    "immutable": "^3.8.1",
    "imports-loader": "^0.6.5",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "numeral": "^1.5.3",
    "path": "^0.12.7",
    "react": "^15.3.0",
    "react-bootstrap-table": "^2.4.1",
    "react-datepicker": "^0.29.0",
    "react-dom": "^15.3.0",
    "react-mixin": "^3.0.5",
    "react-router": "^2.6.1",
    "timepicker": "^1.11.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-register": "^6.11.6",
    "babel-standalone": "^6.12.0",
    "chai": "^3.5.0",
    "chai-as-promised": "^5.3.0",
    "chai-subset": "^1.3.0",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "http-server": "^0.9.0",
    "immutable-devtools": "0.0.7",
    "jsdom": "^9.4.2",
    "karma": "^1.2.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-mocha": "^1.1.1",
    "karma-requirejs": "^1.0.0",
    "karma-safari-launcher": "^1.0.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "mocha": "^3.0.2",
    "mocha-jsdom": "^1.1.0",
    "nightwatch": "^0.9.6",
    "node-sass": "^3.8.0",
    "npm-install-webpack-plugin": "^4.0.4",
    "postcss": "^5.1.2",
    "postcss-loader": "^0.9.1",
    "requirejs": "^2.2.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.1"
  }
}

unit.js

import 'babel-polyfill';
import {describe, before, it, beforeEach, after, afterEach} from 'mocha';
import Promise from 'bluebird';
import * as chai from 'chai';
import chaiAsPromised from 'chai-as-promised';
import chaiSubset from 'chai-subset';

chai.use(chaiAsPromised);
chai.use(chaiSubset);

describe('User', function () {

    let promise = {};

    before(function (done) {

        promise = new Promise(function (resolve, reject) {
            resolve();
            done();
        });

    });

    it('Test', function () {
        console.log('test');
    });
});

project structure

my_project
├── index.html
├── karma.conf.js
├── node_modules
├── other_modules
├── package.json
├── src
│   ├── img
│   ├── script
│   ├── style
├── test
│   ├── unit.js
├── webpack.config.js
├── webpack.karma.js

Upvotes: 0

Views: 1856

Answers (2)

geschwe1
geschwe1

Reputation: 323

You could do something like this: (I'm using webpack2 & babel)

mocha_patch.js

const {
  beforeEach,
  describe,
  expect,
  it,
} = window;

export {
  beforeEach,
  describe,
  expect,
  it,
};

webpack.config.karma.js

module.exports = {
  ...
  resolve: {
    alias: {
      mocha: path.resolve('mocha_patch'),
    }
  },
  ...
};

Upvotes: 0

joshv
joshv

Reputation: 123

I think the problem here is that you are importing mocha in your test code. Webpack simply doesn't know how to parse and bundle mocha properly. I ran into the exact same errors when attempting to use the mocha-loader for webpack. I replaced: import {it, describe} from 'mocha';

with (for the linter) /* global it */ /* global describe */

The test runs fine via using the mocha CLI as it populates the global scope with 'it' and 'describe'. The test also runs in the browser for the same reasons.

Interestingly, I was able to actually get webpack to bundle mocha by telling it to ignore 'fs' and 'child_process', but when loaded in the browser it didn't work, as there were two instances of Mocha, the bundled one, which was what my tests talked to, and the globally scoped version, which was what the html wrapper was trying to run. The bundled one contained all the test suites, but was never run, the global one was run, but it contained no tests. Again, the solution was to not import mocha in the test scripts.

Upvotes: 4

Related Questions