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

Question

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

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) 

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

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
Реагировать
React-маршрутизатор
Webpack
Бабель
Мокко
Chai
Sinon
Sinon-Chai

Answer 1

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

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

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

npm install --save-dev ignore-styles

Run тесты без стилей:

mocha --require ignore-styles

Answer 2

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

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

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

Answer 3

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

CSS-DNT-компилятор.JS

function donothing() { 
    return null; 
} 

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

и запустить команду мокко, как это:

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

Answer 4

My same answer as here, это то, что я использовал, чтобы работать над Вавилонской 6

package.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.extensions.

Answer 5

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

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

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

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

Answer 6

Одним из простых способов является импорт «игнорируемых стилей»; в тестовых классах ..

Answer 7

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

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

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

Больше here.