代码之家 › 专栏 › 技术社区 › Dónal

在Mocha测试中使用webpack插件

mocha webpack reactjs

Dónal · 技术社区 · 6 年前

我用createreact应用程序创建了一个应用程序,并弹出了配置。在 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测试是通过 test-mocha package.json

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

当这个测试运行时,导入替换不会发生。似乎以下任一项都能解决问题:

普通模块替换插件 运行测试时使用
config 测试运行时

4 回复 | 直到 6 年前

n1stre 6 年前

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

希望有帮助。

Dónal 6 年前

我决定了一个简单/明显的解决方案:

config/customer/CUSTOMER.js 包含最小预期配置的,例如。

export default {
  customerName: 'Dummy'
}

当测试运行时,导入

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

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

Ayushya 6 年前

Karmajs

Karmajs是一个测试运行程序,因此您可以将其配置为使用mocha运行测试,也可以使用webpack预处理您的测试,因此所有的预处理(例如 NormalModuleReplacementPlugin

基本上,在应用程序中安装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

测试包.js

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

export default context;

karma.globals.js 文件。

因果报应.globals.js

const __DEV__ = false;

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

yarn karma start

注意:测试也可以配置为在无头浏览器(如phantomjs)中执行,在本例中,我们使用Chrome浏览器来运行测试。

-2

ganjim 6 年前

REACT_APP_CUSTOMER=foo

所以你的测试脚本变成:

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

process.env ,