Мокко тестирование не удалось из-за css в webpack

Question

Мокко тестирование не удалось из-за css в webpack

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

тестирование.реагировать.js

import React from 'react';



export default class Testing extends React.Component {

  render() {

    return (

      <section>

        <form>

          <input type="text" />

        </form>

      </section>

    );

  }

}

тестирование.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 Express Server

Реагировать

Реагировать-маршрутизатор

Webpack

Бабель

Мокко

Чай

Синон

Синон-Чай

576 7

unit-testing reactjs webpack mocha webpack-dev-server

7 ответов:

Comments

Ничего не найдено.

rzueger · Accepted Answer · 2015-12-20 00:06:42

есть babel/register стиль крюк, чтобы игнорировать импорт стиля:

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

установить его:

npm install --save-dev ignore-styles

запуск тестов без стилей:

mocha --require ignore-styles

zhaozhiming · Accepted Answer · 2015-12-13 07:48:43

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

css-dnt-компилятор.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

mummybot · Accepted Answer · 2017-05-23 14:47:25

мой же ответ, как здесь, это то, что я использовал, чтобы работать на Вавилоне 6

пакета.json
"scripts": {
  "test": "mocha --compilers js:babel-core/register 
          --require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'",
инструменты/testHelper.js
// Prevent mocha from interpreting CSS @import files
function noop() {
  return null;
}

require.extensions['.css'] = noop;
это позволяет вам иметь ваши тесты внутри вашей папки src вместе с вашими компонентами. Вы можете добавить столько расширений, сколько вы хотели бы с require.увеличение.

Jim Skerritt · Accepted Answer · 2015-08-27 00:21:27

Так как вы используете webpack, используйте null-loader загрузить null когда webpack встречает необходимый файл CSS/LESS/SASS / etc в ваших компонентах. Установите через npm, а затем обновите конфигурацию webpack, чтобы включить загрузчик:
{
    test: /(\.css|\.less|.\scss)$/,
    loader: 'null-loader'
}
очевидно, что это помешает вам загружать CSS в ваше фактическое приложение, поэтому вы захотите иметь отдельную конфигурацию webpack для вашего тестового пакета, который использует этот загрузчик.

Piotr Jaworski · Accepted Answer · 2018-01-10 12:20:32

для тех, кто ищет, как справиться с этим в jest - вы просто добавляете обработчик для файлов стилей:
// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

// __mocks__/styleMock.js
module.exports = {};
больше здесь.

Artif3x · Accepted Answer · 2017-07-13 21:44:46

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

проблема .меньше загрузчика, который я использовал в своем веб-пакете.конфиг.тест.js файл. Просто замена less-loader на null-loader исправлена моя проблема.
module: {
    rules: [
        {
            test: /\.less$/,
            use: ['null-loader']
        }
    ]
}
для меня это, безусловно, самое простое решение и нацелено на мою конфигурацию тестирования напрямую, а не на изменение/добавление в пакет.сценарии json, или еще хуже, добавляют новые .JS файлы.

Neelendu Shekhar · Accepted Answer · 2017-09-12 14:59:34

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