использовать плагин webpack с тестами Mocha

Question

Я использовал create-реагировать на приложение, чтобы создать приложение, и удалил конфигурацию.В 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, которые запускаются через *Сценарий 1016 * в package.json

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

При выполнении этого теста замена импорта не происходит.Кажется, что одно из следующего решило бы проблему:

• настройте NormalModuleReplacementPlugin, который будет использоваться при запуске тестов
• , найдите способ предоставить макет для configкогда тесты запускаются

Answer 1

Я бы посоветовал вам использовать Karmajs

Karmajs - это тестовый прогон, поэтому вы можете настроить его на использование mocha для запуска тестов, а также вы можете предварительно обработать ваши тесты с помощью веб-пакетапоэтому вся предварительная обработка (для NormalModuleReplacementPlugin и любой другой), которая была выполнена с помощью конфигурации веб-пакета, доступна при выполнении тестов с помощью Karma.

По сути, установите 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.jsпутем выполнения следующей команды.

yarn karma start

Примечание. Тесты также можно настроить на выполнение в браузерах без головы (например, phantomjs), в этом примере мы используем Chrome Browser для запуска наших тестов.

Answer 2

Взгляните на 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 3

Я остановился на простом / очевидном решении:

Создание фиктивного файла config/customer/CUSTOMER.js, который содержит минимальную ожидаемую конфигурацию, например,

export default {
  customerName: 'Dummy'
}

при запуске тестов, импортнапример,

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

больше не будет работать, потому что этот модуль теперь существует.

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 и я не уверен, но я думаю, что это единственный разумный способ, потому что вы издеваетесь над своей средой при выполнении теста.