如何为使用 webpack 构建的库编写回归测试？答案

【问题标题】：How do I write regression tests for a library built with webpack?如何为使用 webpack 构建的库编写回归测试？
【发布时间】：2020-02-01 23:11:40
【问题描述】：

我正在考虑使用 Webpack 和 babel 构建我们的代码，因此我们可以将 ES6 依赖项与预先存在的 AMD 依赖项混合，并根据业务需求继续支持 IE11。

我们的回归测试基本上是：

一个用于对每个类进行单元测试的 javascript 测试文件
每个自定义元素都有一个 HTML 文件，并带有一个 javascript 文件来针对它运行 WebDriver 测试

这适用于 Intern，您只需在 Intern 配置中列出所有 javascript 测试文件。但使用 Webpack 听起来并不实用，因为它有效地创建了数百个入口点。

解决方案是否只是拥有一个需要（即包含）所有测试 javascript 文件的 test-index.js 类型文件，然后将所有 HTML 测试文件组合成一个 Storybook 类型“app”？还是有更简单的？

【问题讨论】：

标签： webpack intern

【解决方案1】：

正如您所指出的，拥有数十或数百个入口点可能会导致构建时间非常长。我通常发现将所有测试捆绑到一个包中并将 Intern 加载作为套件提供最佳体验。

// intern.json
{
  "suites": "build/unit_tests.js"
}

您还可以在 webpack 配置中对测试列表进行编码，而不必手动创建类似 test-index.js 文件的内容。

// webpack.config.js
const { sync: glob } = require('glob');
module.exports = {
  entry: glob('tests/unit/**/*.js'),
  output: {
    filename: 'unit_tests.js'
  }
};

【讨论】：

感谢您的回复。我想这实际上是简单的部分，对我来说更难的部分是合并我所有的 HTML 测试文件。
您能否更详细地描述一下您的结构？这些是作为功能测试运行的吗？
是的，我们正在测试一堆自定义元素，（在实习生术语中）通常每个元素都有一个单元测试和一个功能测试，即两个 javascript 文件和一个 HTML 文件。
您正在合并哪些 HTML 文件？你不需要使用 webpack 进行功能测试（测试或支持文件），除非你想为所有功能测试生成一个单独的测试页面。
我试图避免合并 HTML 文件，但我需要做 something 因为 IE11 不支持 ES6 模块格式，也不支持 ES6 语法。最近虽然我正在考虑通过 requirejs-babel/es6 运行测试！而不是 webpack.. 可能会影响性能等，但这并不重要，因为它们只是测试。