Unit Test with karma and webpack: _karma_webpack_ - no such file or directory

Question

I am trying to run a unit test with coverage (using karma-coverage) and webpack (using karma-webpack). The tests run as expected, but to generate a coverage report the actual source file (not the test) needs to be loaded and passed through the coverage and webpack preprocessors.

Unfortunately this fails with the following error:

ERROR [karma]: { [Error: no such file or directory]
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/views/Foo/Foo.js' }
Error: no such file or directory

Foo.js is the file that contains the source. Directory structure is like this:

karma.conf.js
  - src/
      - js/
        - views/
            - Foo/
                - Foo.js
                - test/
                    - FooTest.js

karma.conf.js:

module.exports = function (config) {
  config.set({
    basePath: 'src/js/',

    frameworks: ['jasmine'],

    files: [
      '**/test/*Test.js',
      '**/Foo.js',
    ],

    exclude: [],

    preprocessors: {
      '**/test/*Test.js': ['webpack'],
      '**/Foo.js': ['webpack', 'coverage'],
    },

    coverageReporter: {
      type: 'html',
      dir: 'coverage',
    },

    webpack: {
      resolve: {
        alias: [
          { _karma_webpack_: 'src/js' },
        ],
      },

    },

    reporters: ['progress', 'coverage'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_DEBUG,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false,

    concurrency: Infinity,
  });
};

The problem is obvious: the path /_karma_webpack_/views/Foo/Foo.js indeed doesn't exist. I guess it's some internal path, but how can I change this?

As you can see I already tried to use the webpack resolve option for this, but it's not working. Since the error message states ERROR [karma] I am also a bit concerned that this error might be something different.

Also, I had the suspicion that maybe the globbing pattern **/Foo.js is off, but trying some changes there (like **/**/Foo.js) also didn't help.

Washing

The _karma_webpack_ file might not exist if your bundle fails to build. See if you have any syntax errors or failing require() statements in your test code. This problem is only exacerbated by the fact that the webpack error message is suppressed. I've been trying to figure out how to to get karma-webpack to spit out the exact error webpack runs into – Dumont

Yes @SohanJain this happened to me. However running my tests locally revealed an edge-case module-naming-clash warning, which was getting suppressed when running my tests remotely on Travis. – Sanfo

Answer 1

I had this same problem. Turns out, I needed to get out of the karma_webpack folder, so instead of

preprocessors: {
  '**/test/*Test.js': ['webpack'],
  '**/Foo.js': ['webpack', 'coverage'],
},

try

preprocessors: {
  '../**/test/*Test.js': ['webpack'],
  '../**/Foo.js': ['webpack', 'coverage'],
},

Clayberg