有没有办法在我的 Webpack 打包代码上运行测试？

Question

在我未构建的源代码中使用require('image.png')导致我的 mocha 测试出现问题（无效字符）。

有没有办法： package 我的 Webpack 项目，然后针对该打包代码运行我的测试？ 如果我可以在 Webpack 中设置多个 output 目录，我将能够做到这一点，但我没有看到有关如何做到这一点的文档。

Webpack 配置

module.exports = {
  mode: 'development',
  entry: {
    index: './src/js/index.js'
  },
   // It would be great if this were an Array
  output: {
    filename: '[name].bundle.js',
    assetModuleFilename: 'assets/test/[name][ext]',
    path: path.resolve(__dirname, 'public'),
    clean: true
  },

Answer 1

你必须从不同的角度来思考这个问题。 我们通常运行三种类型的测试：

1. 单元测试（在源代码上，同时 mocking 导入/所需模块）
2. 端到端测试（在使用外部运行器（如 Selenium、Cypress 等）部署的代码上）
3. 集成测试（通常在 mocking 较少的源代码上运行或在复杂场景中的已部署代码上运行）

因此，尝试为生成的代码运行测试是没有意义的。 您可以为源代码运行测试，或者获取已编译的代码，部署它并运行您的测试。

现在，假设您正在为模块xyz.js执行单元测试并且需要require('image.png')意味着您的模块xyz.js依赖于名为image.png的外部模块。 在这种情况下，在运行xyz.js测试之前，您应该首先使用一些 mocking 库（如sinon.js等）来模拟此模块image.png 。您需要另外使用mock-require或proxyrequire来存根/模拟调用以require function .

const mock = require('mock-require');
const sinon = require('sinon');


describe('My Suite', () => {
  
  before(() => {
    // You can use spy or stub or mock.
    const spy = sinon.spy();
    
    // Mocking you module here 
    mock('image.png', spy);
  });

  it('should call image.png', () => {
    // Add your test here
  });

  after(() => {
    // Mock cleanup
    mock.stop('image.png');
  });
});

如果您真的打算对已编译的代码运行测试，那么正确的方法是将此代码部署到某个临时暂存区域并使用无头浏览器访问应用程序并执行所需的测试。