如何在Webpack中集成业力

Question

我是一个webpack新手，对测试有疑问。

我有一个使用webpack，打字稿和业力作为测试运行程序的项目，并且我想对每个文件更改运行测试（例如，在“监视”模式下）

我知道karma-webpack，当我将karma作为自己的进程运行时，它运行良好（karma start ...）

但是我想要将业力集成到webpack流中。因此，从我幼稚的角度来看，我认为必须在webpack（例如linter）的预加载中定义业力。

但是我什么也没发现。。。我不敢相信这种通用的工作流程是不可能的（对每个源更改都进行测试）

有人可以给我一个建议吗？

Answer 1

我有同样的问题，就像我使用的 TDD 工作流程一样。编写测试后更改代码，测试不会重新运行。可以对每个文件更改运行测试。

因为karma 文件有 3 个选项：包含、提供、观看。

您可以将捆绑包指定为模式，然后告诉 karma 观看它

karma.config.js

files: [
  // watch final file so when source change and it's final file, re run the test
  { pattern: './dist/js/*.wp.js', watched: true},
],

但是当我们karma start不使用 webpack 时，会处于活动状态并观看。因此同时使用karma 和 webpack 运行。请注意，webpack 应仅监视源代码，而 karma 应监视捆绑文件。然后我们可以添加 script 属性，package.json如下所示

包.json

"scripts": {
  "test": "karma start karma.config.js",
  "build": "webpack",
  "dev": "concurrently \"webpack --progress --colors --watch\" \"karma start karma.config.js --colors\"",
 },

然后运行npm run dev开始编码

Answer 2

时光飞逝，已经是2018年6月了。由于网上没有太多关于此的文档，我想拿出我的 2 美分。

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

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

业力配置文件

{
  ...
  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 配置，以便每次在某些测试文件或正在运行的文件中发生更改时更新测试包导入其中。这是我正在使用的配置：

业力配置文件

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

关于它的更多信息在这里。

Answer 3

到目前为止，我从未听说过 webpack，但我对 karma 非常了解。我不是 100% 确定你在这里问什么，所以如果这根本没有帮助，请告诉我。您可以设置 karma 来完全执行您想要的操作（对每个文件更改运行测试）。

您必须在karma.conf.js文件中设置两个选项：autoWatch: true和singleRun: false。

karma.conf.js

module.exports = function(config) {
    config.set({
        // set other options and stuff...
        autoWatch:  true,
        singleRun: false
    });
};

autoWatch设置为 true 可以在任何文件更改时监视文件并执行测试。设置singleRun为 false 意味着您只需要执行karma start（或者无论如何将其集成到 webpack 中）一次即可运行测试，而不必每次进行更改或想要运行套件时都输入命令；它只是让业力在后台运行。