Ошибка мокко из-за css в webpack

Я новичок в Mocha, и я пытаюсь использовать его для тестирования простого компонента React. Тест прошел бы, если компонент реакции не имеет стиля CSS, но генерирует синтаксическую ошибку, если тег в компоненте React содержит любое имя класса:

Testing.react.js

import React from 'react';

export default class Testing extends React.Component {
  render() {
    return (
      <section>
        <form>
          <input type="text" />
        </form>
      </section>
    );
  }
}

testing.jsx

import {
  React,
  sinon,
  assert,
  expect,
  TestUtils
} from '../../test_helper';

import TestingSample from '../../../app/components/Testing.react.js';

describe('TestingSample component', function(){
    before('render and locate element', function(){
        var renderedComponent = TestUtils.renderIntoDocument(
            <TestingSample />
        );

        var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
            renderedComponent, 'input'
        );

        this.inputElement = inputComponent.getDOMNode();
    });

    it('<input> should be of type "text"', function () {
        assert(this.inputElement.getAttribute('type') === 'text');
    });
})

Тест пройдет:

> mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx


  TestSample component
    ✓ <input> should be of type "text"


  1 passing (44ms)

после того, как я добавил имя класса внутри входного тега, появляется сообщение об ошибке:

import React from 'react';
import testingStyle from '../../scss/components/landing/testing.scss';

export default class Testing extends React.Component {
  render() {
    return (
      <section>
        <form>
          <input type="text" className="testingStyle.color" placeholder="Where would you like to dine" />     
        </form>
      </section>
    );
  }
}

Результат теста:

SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
> 1 | .color {
    | ^
  2 |   color: red;
  3 | }

Я искал в Интернете, но пока не повезло. Я что-то упускаю? Пожалуйста, помогите мне или укажите мне в правильном направлении. В настоящее время я использую:
Node Экспресс-сервер
Реагировать
Реагировать-маршрутизатор
Webpack
Бабель
мокко
Chai
Sinon
Sinon-чай

Ответы

Ответ 1

Существует крючок стиля babel/register для игнорирования импорта стиля:

https://www.npmjs.com/package/ignore-styles

Установите его:

npm install --save-dev ignore-styles

Запустите тесты без стилей:

mocha --require ignore-styles

Ответ 2

вы можете использовать компиляторы css для запуска mocha, компилятор js:

CSS-DNT-compiler.js

function donothing() {
  return null;
}

require.extensions['.css'] = donothing;
require.extensions['.less'] = donothing;
require.extensions['.scss'] = donothing;
// ..etc

и запустите команду mocha следующим образом:

mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive

Ответ 3

Мой такой же ответ, как здесь, вот что я использовал для работы над 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 вместе со своими компонентами. Вы можете добавить столько расширений, сколько захотите, с помощью require.extensions.

Ответ 4

Поскольку вы используете webpack, используйте null-loader для загрузки null, когда webpack встречает требуемый CSS/LESS/SASS/etc. файл в ваших компонентах. Установите через npm, а затем обновите конфигурацию webpack, чтобы включить загрузчик:

{
    test: /(\.css|\.less|.\scss)$/,
    loader: 'null-loader'
}

Очевидно, это предотвратит загрузку CSS в вашем реальном приложении, поэтому вы захотите иметь отдельную конфигурацию webpack для своего тестового пакета, который использует этот загрузчик.

Ответ 5

Ни один из этих решений не работал у меня, поскольку я использую mocha-webpack, и он не принимает переключатель "--compilers". Я реализовал пакет игнорируемых стилей, как описано в наиболее популярном ответе, но он казался инертным, без каких-либо различий в моем отчете о покрытии в Стамбуле (без файлов, которые все еще проверяются).

Проблема заключается в загрузчике .less, который я использовал в моем файле webpack.config.test.js. Просто заменив меньшегрузку на null-loader исправил мою проблему.

module: {
    rules: [
        {
            test: /\.less$/,
            use: ['null-loader']
        }
    ]
}

Для меня это, безусловно, самое простое решение, и напрямую нацелено на мою конфигурацию тестирования, вместо того, чтобы изменять/добавлять к скриптам package.json или, что еще хуже, добавлять новые .js файлы.

Ответ 6

Для тех, кто ищет, как справиться с этим в jest - просто добавьте обработчик для файлов стилей:

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

// __mocks__/styleMock.js
module.exports = {};

Больше здесь.

Ответ 7

Один простой способ - импортировать 'ignore-styles'; в ваших тестовых классах.

Ответ 8

Код ниже работает без каких-либо зависимостей. Просто добавьте его в начало тестов.

var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function () {
    if (arguments[0] && arguments[0].endsWith(".css"))
        return;
    return originalRequire.apply(this, arguments);
};