使用 karma 和 webpack 进行单元测试：_karma_webpack_ - 没有这样的文件或目录答案

【问题标题】：Unit Test with karma and webpack: _karma_webpack_ - no such file or directory使用 karma 和 webpack 进行单元测试：_karma_webpack_ - 没有这样的文件或目录
【发布时间】：2016-07-22 09:46:14
【问题描述】：

我正在尝试运行覆盖率（使用karma-coverage）和webpack（使用karma-webpack）的单元测试。测试按预期运行，但要生成覆盖率报告，需要加载实际源文件（不是测试）并通过coverage 和webpack 预处理器。

不幸的是，这失败并出现以下错误：

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 是包含源的文件。目录结构是这样的：

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,
  });
};

问题是很明显：路径/_karma_webpack_/views/Foo/Foo.js 确实不存在。我猜这是一些内部路径，但我该如何改变呢？

如您所见，我已经尝试为此使用 webpack 解析选项，但它不起作用。由于错误消息指出ERROR [karma] 我也有点担心这个错误可能会有所不同。

此外，我怀疑可能是通配模式 **/Foo.js 已关闭，但在那里尝试一些更改（如 **/**/Foo.js）也没有帮助。

【问题讨论】：

如果您的包构建失败，_karma_webpack_ 文件可能不存在。查看您的测试代码中是否有任何语法错误或失败的 require() 语句。这个问题只会因为 webpack 错误消息被抑制的事实而加剧。我一直在试图弄清楚如何让 karma-webpack 吐出 webpack 遇到的确切错误
是的@SohanJain 这发生在我身上。然而，在本地运行我的测试显示了一个极端情况下的模块命名冲突警告，当我在 Travis 上远程运行我的测试时，该警告被抑制了。

标签： karma-runner webpack karma-coverage

【解决方案1】：

我遇到了同样的问题。原来，我需要离开 karma_webpack 文件夹，所以不是

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

试试

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

【讨论】：