testing - 如何在 webpack 中集成 karma

Question

我是一个 webpack 新手，有一个关于测试的问题。

我有一个使用 webpack、typescript 和 karma 作为测试运行器的项目，我想在每次文件更改时运行我的测试(例如，在“监视”模式下)

我知道 karma-webpack 并且当我将 karma 作为自己的进程运行时它运行良好(karma start ...)

但我想要的是在 webpack 流程中集成 karma。 因此，从我天真的角度来看，我认为 karma 必须在 webpack 的预加载(例如 linter)中定义。

但是我什么也没找到.... 我无法相信这种通用的工作流程是不可能的(对每个源更改运行测试)

你们中的任何人都可以给我一个建议吗？

Answer 1

时间过得真快，转眼就到了 2018 年 6 月。由于网上没有太多关于此的文档，我想捐出我的 2 美分。

我目前有一个工作设置，我将我的测试与 webpack 捆绑在一起，监视更改以便自动重新运行测试。

我正在使用 karma-webpack使用 Alternative usage 中解释的配置部分，我认为这是解决问题中提出的问题的正确方法。

karma.conf.js

{
  ...
  files: [
    // only specify one entry point
    // and require all tests in there
    'test/index_test.js'
  ],
  preprocessors: {
    // add webpack as preprocessor
    'test/index_test.js': [ 'webpack' ]
  },
  ...
}

测试/index_test.js

// require all modules ending in "_test" from the
// current directory and all subdirectories
const testsContext = require.context(".", true, /_test$/)

testsContext.keys().forEach(testsContext)

在我看来，按照@Adi Prasetyo 的建议观察整个包的变化是错误的。我们应该只关注测试文件和导入其中的文件的变化，这可以通过最后一个 URL 中显示的配置来实现。

对于热重载的工作非常重要(至少在我的情况下它是它工作的原因)，你需要设置 webpack-dev-middleware 配置以便每次在某些测试文件中发生更改时更新测试包或在其中导入的文件。这是我正在使用的配置:

karma.config.js

{
  ...
  webpackMiddleware: {
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000, // customize depending on PC power
    },
  },
  ...
}

更多信息here .