[4.0.0-rc.6] Test files not transpiled

[SaurabhHarwande]

I have setup a VueJS project with webpack. Test files are written in typescript. The project by itself work fine. webpack --config config/webpack.config.dev.js compiles the project successfully the ts files are transpiled to js.
Now I have defined a karma.config.js as follows:

var webpackConfig = require('./webpack.config.dev.js');

module.exports = function(config) {
    config.set({
        basePath: ".",
        frameworks: [
            'mocha',
            'chai',
            'sinon'
        ],
        files: ['../src/test/**/*.spec.ts'],
        preprocessors: {
            '**/*.spec.ts': ['webpack', 'sourcemap']
        },
        webpack: webpackConfig,
        reporters: [
            'spec'
        ],
        browsers: [
            'Firefox'
        ]
    });
};

The webpack config is quite big. Here is the config for typescript:

module.exports = {
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: [{
                loader: 'ts-loader',
                options: {
                    configFile: 'config/tsconfig.json',
                    appendTsSuffixTo: [/\.vue$/]
                }
            }],
            exclude: [
                /node_modules/
            ]
        }]
    }
}

running karma start ./config/karma.config.js --single-run gives the following error:

$ karma start ./config/karma.config.js --single-run
clean-webpack-plugin: /home/saurabh/DevEnv/SticyNotes/vuejs-template/dist has been removed.
ℹ ｢wdm｣: Hash: 58323bb986fc875ce7c6
Version: webpack 4.29.0
Time: 9702ms
Built at: 02/03/2019 1:57:53 PM
                                 Asset       Size  Chunks             Chunk Names
  20c189aa192501e4ec907d5f84e8fbb1.ttf    182 KiB          [emitted]
 2fad952a20fbbcfd1bf2ebb210dccf7a.woff   6.02 KiB          [emitted]
  304f31f4585cf09768f9d4d69574d2d6.svg    141 KiB          [emitted]
  3186ebd2918491445ea391a4f74e8dd7.eot    122 KiB          [emitted]
3638e62ea50e6f5859b6a15276c25c87.woff2   72.6 KiB          [emitted]
662c24d02ff1711bd01ec3868df8680b.woff2   70.5 KiB          [emitted]
6a9d786e67d54419d8629081fbb555d6.woff2   13.3 KiB          [emitted]
  6f0a76321d30f3c8120915e57f7bd77e.ttf   10.8 KiB          [emitted]
 72f15fa766bc05a4b3ecaa8579763f85.woff   16.4 KiB          [emitted]
  80efa56be5eaebd06ea34f1adbad071c.eot   33.6 KiB          [emitted]
  9a52a4e971938c52d6c541b9bf3dc2ec.eot    182 KiB          [emitted]
 9c73abbdbd6492778680163269b68345.woff     94 KiB          [emitted]
  a995bae1d3cba3bdcf24071bf09b51c8.ttf    122 KiB          [emitted]
          app.58323bb986fc875ce7c6.css    651 KiB     app  [emitted]  app
                                app.js   5.09 MiB     app  [emitted]  app
 c7d7a2a1781e8da1dc85deb1e4f39b84.woff   82.6 KiB          [emitted]
  c8ea4c79af12c22b2b6073999137156c.svg    797 KiB          [emitted]
  e4fed0a589f7130c6ef834a029854646.svg    645 KiB          [emitted]
  fcb220ee57704c9c80680153bada946c.ttf   33.3 KiB          [emitted]
                            index.html  429 bytes          [emitted]
Entrypoint app = app.58323bb986fc875ce7c6.css app.js
[./node_modules/async-validator/es/index.js] 7.68 KiB {app} [built]
[./node_modules/babel-helper-vue-jsx-merge-props/index.js] 1.25 KiB {app} [built]
[./node_modules/element-ui/lib/button-group.js] 8.39 KiB {app} [built]
[./node_modules/element-ui/lib/button.js] 10 KiB {app} [built]
[./node_modules/element-ui/lib/checkbox-group.js] 9.45 KiB {app} [built]
[./node_modules/element-ui/lib/checkbox.js] 17.6 KiB {app} [built]
[./node_modules/element-ui/lib/element-ui.common.js] 951 KiB {app} [built]
[./node_modules/element-ui/lib/input-number.js] 20.5 KiB {app} [built]
[./node_modules/element-ui/lib/input.js] 23.8 KiB {app} [built]
[./node_modules/element-ui/lib/locale/index.js] 1.68 KiB {app} [built]
[./node_modules/element-ui/lib/theme-chalk/index.css] 39 bytes {app} [built]
[./node_modules/vue/dist/vue.runtime.esm.js] 210 KiB {app} [built]
[./src/App.vue] 1.07 KiB {app} [built]
[./src/main.ts] 280 bytes {app} [built]
[./src/router.ts] 258 bytes {app} [built]
    + 154 hidden modules
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  534 KiB       0
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 487 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js??ref--2-2!node_modules/sass-loader/lib/loader.js!node_modules/@fortawesome/fontawesome-free/css/all.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff] 83 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2] 84 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff] 83 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2] 84 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff] 83 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js!./node_modules/@fortawesome/fontawesome-free/css/all.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/sass-loader/lib/loader.js!./node_modules/@fortawesome/fontawesome-free/css/all.css 59.5 KiB {mini-css-extract-plugin} [built]
        + 3 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js??ref--2-2!node_modules/sass-loader/lib/loader.js!node_modules/element-ui/lib/theme-chalk/index.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js!./node_modules/element-ui/lib/theme-chalk/index.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/sass-loader/lib/loader.js!./node_modules/element-ui/lib/theme-chalk/index.css 184 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.35 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/url-escape.js] 460 bytes {mini-css-extract-plugin} [built]
    [./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf] 82 bytes {mini-css-extract-plugin} [built]
    [./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff] 83 bytes {mini-css-extract-plugin} [built]
ℹ ｢wdm｣: Compiled successfully.
03 02 2019 13:57:53.871:INFO [karma-server]: Karma v4.0.0 server started at http://0.0.0.0:9876/
03 02 2019 13:57:53.874:INFO [launcher]: Launching browsers Firefox with concurrency unlimited
03 02 2019 13:57:53.878:INFO [launcher]: Starting browser Firefox
03 02 2019 13:57:56.684:INFO [Firefox 65.0.0 (Linux 0.0.0)]: Connected on socket jaOYt2QqeU78hR2aAAAA with id 91096430
03 02 2019 13:57:56.783:WARN [middleware:karma]: Invalid file type, defaulting to js. ts

Firefox 65.0.0 (Linux 0.0.0): Executed 0 of 0 ERROR (0.012 secs / 0 secs)

error Command failed with exit code 1.

The complete code is in this repository pasting all of it here would just make it difficult to read. https://gitlab.com/saurabh-harwande-repos/vuejs-template

[matthieu-foucault]

Thanks for the bug report!

Does the "alternative usage" described in the README work for you? (have a single .js file as your test entry point, and have that file load all tests using require.context)

[SaurabhHarwande]

Same results with the alternative approach. Just the error is a bit different as different file is used.

ℹ ｢wdm｣: Compiled successfully.
05 02 2019 01:26:14.122:INFO [karma-server]: Karma v4.0.0 server started at http://0.0.0.0:9876/
05 02 2019 01:26:14.124:INFO [launcher]: Launching browsers Firefox with concurrency unlimited
05 02 2019 01:26:14.129:INFO [launcher]: Starting browser Firefox
05 02 2019 01:26:15.734:INFO [Firefox 65.0.0 (Linux 0.0.0)]: Connected on socket yvLS_AvvRvYoEU88AAAA with id 24325332
Firefox 65.0.0 (Linux 0.0.0) ERROR
  {
    "message": "ReferenceError: require is not defined\nat /home/saurabh/DevEnv/SticyNotes/vuejs-template/src/test/main_test.js:1:7\n\n@/home/saurabh/DevEnv/SticyNotes/vuejs-template/src/test/main_test.js:1:7\n",
    "str": "ReferenceError: require is not defined\nat /home/saurabh/DevEnv/SticyNotes/vuejs-template/src/test/main_test.js:1:7\n\n@/home/saurabh/DevEnv/SticyNotes/vuejs-template/src/test/main_test.js:1:7\n"
  }

Firefox 65.0.0 (Linux 0.0.0): Executed 0 of 0 ERROR (0.565 secs / 0 secs)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It seems that the file is not transpiled at all, it is passed on as is. Error is require is not defined. main_test.js is the single entrypoint for my testfiles.
I have checked and rechecked the configurations but they seem fine to me.

[QXD-me]

I think I'm getting the same issue, any updates? Or is there anything I can do to help diagnose the issue?

[mipatterson]

I was having a similar issue where the console was reporting the following:

Chrome 72.0.3626 (Windows 10.0.0): Executed 0 of 0 ERROR (0.072 secs / 0 secs)

After about 4 days of playing around with config changes, I found that my issue stemmed from the use of splitChunks. I disabled splitChunks by setting it to undefined after importing webpack.config.js into my karma configuration and my issues went away:

function buildWebpackConfig() {
  const webpackArgs = {
    mode: "development"
  };

  const webpackConfig = require("../../webpack.config")(undefined, webpackArgs);

  webpackConfig.mode = "development";
  webpackConfig.optimization.splitChunks = undefined;

  return webpackConfig;
}

[QXD-me]

Thanks for the reply, though that looks like a different issue from mine. I was getting the "unrecognised file type ts" bit.

I did figure mine out though, the issue was I was requiring the config wrong, so none of the loaders were being applied. I don't have access to code right now but the fix was something like:
const config = require("config")
Becomes
const config = require("config")()[0]
(The config is exporting an array, though I will soon change it so the [0] bit isn't necessary)

[matthieu-foucault]

@mipatterson splitChunks is indeed not supported by karma-webpack v4. Version 5, still in alpha, is fixing that issue.

@QXD-me It looks like your issue is related to #390 / #391. I shall fix that ASAP.

[JBSK]

Has this issue been fixed? i seem to have the same problem.
webpack.config.js

const path = require('path');
const fs = require('fs');
const NodemonWebpack = require('nodemon-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = {
    // the main source code file
    entry: './src/index.ts',
    target: "node",
    node: {
        __dirname: true
    },
    output: {
        // the output file name
        filename: 'index.js',
        // the output path               
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
            }
        ]
    },
    plugins: [
        new NodemonWebpack()
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: "tsconfig.json"
        })]
    },
    externals: [nodeExternals()]
};

// Get node modules
function getNodeModules() {
    const nodeModules = {};
    fs.readdirSync('node_modules')
        .filter(function (x) {
            return ['.bin'].indexOf(x) === -1;
        })
        .forEach(function (mod) {
            nodeModules[mod] = 'commonjs ' + mod;
        });

    return nodeModules;
}

webpack.test..config.js

const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    mode: 'development',
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
}

karma.conf.js

var webpackConfig = require('./webpack.test.config.js');
webpackConfig.entry = undefined;
webpackConfig.mode = "development";

module.exports = (config) => {
    config.set({
        browsers: ["PhantomJS"],
        frameworks: ["mocha", "chai"],
        plugins: [
            "karma-typescript",
            "karma-mocha",
            "karma-mocha-reporter",
            "karma-chai",
            "karma-phantomjs-launcher",
            "karma-webpack"
        ],
        reporters: ["progress", "mocha"],
        files: [
            "src/test.ts"
        ],
        preprocessors: {
            "src/test.ts": ["webpack"], 
        },
        webpack: webpackConfig
    })
};

This results in the following error:
{
"message": "SyntaxError: Unexpected token ')'\nat src/test.js:99:0",
"str": "SyntaxError: Unexpected token ')'\nat src/test.js:99:0"
}

It does not seem to recognize the arrow functions in my file, which leads me to believe that it is not transpiling it properly

[mdblr]

Is any one aware of issues with mini-css-extract-plugin? I see that the package is used above from the logs the op attached (edit for clarity). In my project, I use it too and I believe it is the cause of why I am experiencing the above issue, i.e. the tests aren't compiled and Karma logs Executed 0 of 0 ERROR.

When I opened the browser in debug, the source did not include my test bundles. Disabling mini-css-extract-plugin solved this.

I am trying to find more information still. Has anyone else seen or hear of an issue like this with that package and karma-webpack?

[liorbd]

@SaurabhHarwande @mdblr Same issue for me on karma-webpack v3.
I fixed it by update to karma-webpack v4.0.2.

[devlinjunker]

@SaurabhHarwande @mdblr Same issue for me on karma-webpack v3.
I fixed it by update to karma-webpack v4.0.2.

@liorbd saved the day!

[codymikol]

Closing this as it sounds like it is fixed in 4.0.2 and we are now on 5.0.0