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”时。

当应用运行时，此方法工作正常，但是我有一些通过test-mocha中的package.json脚本运行的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应该如下所示：

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

您可以尝试的另一种选择是使用mock-require，它负责模拟node.js模块。根据您的情况，您需要输入mock-helper.js：

"test-mocha": "NODE_ENV=test node_modules/.bin/mocha -r babel-register -r ./test/mock-helper.js --recursive test"

./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);

希望有帮助。

Answer 2

我选择了一个简单/显而易见的解决方案：

创建一个虚拟文件config/customer/CUSTOMER.js，其中包含最低预期配置，例如

export default {
  customerName: 'Dummy'
}

运行测试时，将导入

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

将不再失败，因为此模块现在存在。

Answer 3

我建议您使用Karmajs

Karmajs是一名测试跑步者，因此您可以将其配置为使用mocha来运行测试，还可以使用webpack预处理测试，因此所有预处理（针对NormalModuleReplacementPlugin和其他任何预处理）使用Karma执行测试时，可以通过webpack配置完成此操作。

基本上，在您的应用程序中安装Karma及其关联的软件包

yarn add karma karma-chai-plugins karma-chrome-launcher karma-cli karma-coverage karma-mocha karma-mocha-reporter karma-sinon-chai karma-sourcemap-loader karma-webpack

创建 karma.conf.js

const webpackConfig = require('./webpack.config');
const webpack = require('webpack');
webpackConfig.devtool = 'inline-source-map';
webpackConfig.plugins = [
  new webpack.ProvidePlugin({
    'es6-promise': 'es6-promise',
  }),
];

module.exports = function (config) {
  config.set({
    browsers: [ 'Chrome' ],
    // karma only needs to know about the test bundle
    files: [
      '../node_modules/babel-polyfill/dist/polyfill.js',
      'karma.globals.js',
      'tests.bundle.js',
    ],
    frameworks: [ 'chai', 'mocha' ],
    // run the bundle through the webpack and sourcemap plugins
    preprocessors: {
      'tests.bundle.js': [ 'webpack', 'sourcemap' ],
    },
    // reporters: [ 'mocha', 'coverage' ],
    reporters: [ 'mocha' ],
    // coverageReporter: {
    //   type: 'text-summary',
    //   includeAllSources: true
    // },
    singleRun: false,
    autoWatch: true,
    // webpack config object
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true,
    },
  });
};

创建tests.bundle.js用于为所有测试文件运行测试，在此示例中，我们所有的测试文件都具有文件扩展名.spec.js，并且位于./src目录内。

tests.bundle.js

const context = require.context('./src', true, /\.spec\.js$/);
context.keys().forEach(context);

export default context;

要设置全局变量，可以在所有应用/测试中使用该变量，可以使用karma.globals.js文件进行设置。

karma.globals.js

const __DEV__ = false;

const INITIAL_STATE = {
  name: 'My App',
  version: 'v2.5.6'
};

完成上述配置后，您可以通过执行以下命令从创建karma.config.js和package.json的目录中运行所有测试。

yarn karma start

注意：测试也可以配置为在无头浏览器（例如phantomjs）中执行，在本示例中，我们使用Chrome浏览器运行测试。

Answer 4

您可以将其添加到测试脚本中：

REACT_APP_CUSTOMER=foo

因此您的测试脚本变为：

"test-mocha": "NODE_ENV=test REACT_APP_CUSTOMER=foo node_modules/.bin/mocha --require babel-register --recursive test"

这将起作用，因为它可以在process.env中设置所需的值，我不确定，但是我认为这是唯一合理的方法，因为您在运行测试时嘲笑环境。

在Mocha测试中使用webpack插件

4 个答案: