Обработка импорта CSS WebPack при тестировании с помощью Mocha и Babel

При тестировании файлов .js, которые имеют импорт Webpack CSS, например import './style.css', Mocha выдает синтаксическую ошибку (потому что он пытается импортировать и анализировать файл CSS как JS). Существует решение для которое уже было опубликовано в Stack Overflow, но оно адресовано только в том случае, если вы еще не используете компилятор с Mocha. Я использую Babel 5. Я пробовал следующее, но кажется, что Mocha не поддерживает передачу нескольких компиляторов:

// npm test script

mocha ./src/**/*Test.js --compilers css:./scripts/mocha-webpack-compiler.js js:babel/register

// scripts/mocha-webpack-compiler.js

function noop() {
  return null;
}

require.extensions['.css'] = noop;

Есть ли способ иметь несколько компиляторов Mocha или лучший способ сказать Mocha не пытаться проанализировать импорт Webpack CSS?

EDIT:

Мне нравится предлагаемое решение @Giles B ниже; это было именно то, что мне нужно. Однако, так как я все еще на Вавилоне 5, мне нужно было несколько настроек, как показано ниже:

mocha.opts

--require scripts/support/babelhook
--require scripts/support/mocha-webpack-compiler

Сценарии /babelhook.js

require('babel/register');

Сценарии/мокко WebPack-compiler.js

function noop() {
    return null;
}
require.extensions['.css'] = noop;

mocha script

mocha ./src/**/*Test.js

Это работает для меня с помощью babel и babel-core, как версии 5.8.23.

Ответ 1

Я столкнулся с той же проблемой и просто получил ее работу, поэтому в моем файле mocha.opts я добавил следующие вызовы require:

--require test/babelhook
--require test/css-null-compiler

В babelhook.js У меня есть инструкция для загрузки babel:

// This file is required in mocha.opts
// The only purpose of this file is to ensure
// the babel transpiler is activated prior to any
// test code, and using the same babel options

require("babel-register")();

Затем из ссылки, которую вы предоставили, я устанавливаю css-null-compiler.js следующим образом:

// Prevent Mocha from compiling class
function noop() {
  return null;
}

require.extensions['.css'] = noop;
require.extensions['.scss'] = noop;

Надеюсь, что это поможет.

Ответ 2

Основываясь на ответе @Giles выше, это то, что я использовал для работы над Babel 6

package.json

"scripts": {
  "test": "mocha --compilers js:babel-core/register 
          --require ./tools/testHelper.js 'src/**/*[email protected](js|jsx)'",

инструменты /testHelper.js

// Prevent mocha from interpreting CSS @import files
function noop() {
  return null;
}

require.extensions['.css'] = noop;

Это позволяет проводить тесты внутри вашей папки src вместе с вашими компонентами.