reactjs - 使用 webpack 插件进行 Mocha 测试

Question

我使用 create-react-app 创建一个应用程序，并弹出配置。在 webpack.config.dev.js 和 webpack.config.prod.js 中，我配置了 NormalModuleReplacementPlugin，如下所示:

new webpack.NormalModuleReplacementPlugin(/(.*)CUSTOMER(\.*)/, function(resource) {
  const customerName = process.env.REACT_APP_CUSTOMER;
  resource.request = resource.request.replace(/CUSTOMER/, customerName);
})

这样做的目的是替换进口，例如

import config from '../config/customer/CUSTOMER';

与

import config from '../config/customer/foo';

当REACT_APP_CUSTOMER变量的值设置为“foo”时。

这在应用程序运行时工作正常，但我有一些 Mocha 测试是通过 package.json 中的 test-mocha 脚本运行的

"scripts": {
  "test-mocha": "NODE_ENV=test node_modules/.bin/mocha --require babel-register --recursive test"
}

运行此测试时，不会发生导入替换。看来以下任一方法都可以解决问题:

• 配置运行测试时使用的NormalModuleReplacementPlugin
• 找到一种在运行测试时为config提供模拟的方法

Answer 1

看看mocha-webpack 。正如文档中提到的，它基本上运行 webpack test.js output.js && mocha output.js 并进行了一些优化。因此，在npm i -D mocha-webpack之后，您的脚本应该如下所示:

"scripts": {
  "test-mocha": "NODE_ENV=test node_modules/.bin/mocha-webpack --recursive test"
}

<小时/>

您可以尝试的另一个选择是使用 mock-require ，它负责模拟 node.js 模块。在您的情况下，您需要 require mock-helper.js:

"test-mocha": "NODE_ENV=test node_modules/.bin/mocha -r babel-register -r ./test/mock-helper.js --递归测试"

并且 ./test/mock-helper.js 应该类似于:

const mock = require('mock-require');
const defaultCustomer = require('../config/customer/default');
const fooCustomer = require('../config/customer/foo');

const customerMock = (function () {
  switch (process.env.REACT_APP_CUSTOMER) {
    case 'foo': return fooCustomer;
    default: return defaultCustomer;
  }
}())

mock('../config/customer/CUSTOMER', customerMock);

希望有帮助。