由于webpack中的CSS,摩卡testing失败

我是摩卡新手,我正在尝试使用它来testing一个简单的React组件。 如果反应组件没有任何CSS样式,testing会通过,但如果React组件中的标记包含任何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'); }); }) 

testing将通过:

 > 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) 

在input标签内部添加了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> ); } } 

testing结果:

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

我在网上search,但没有运气到目前为止。 我错过了什么吗? 请帮助我或指出我正确的方向将不胜感激。 我目前正在使用:
节点快速服务器
应对
反应路由器
的WebPack
巴别塔
摩卡

兴农
兴农柴

有一个babel/register风格的钩子忽略样式导入:

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

安装它:

npm install --save-dev ignore-styles

运行没有样式的testing:

mocha --require ignore-styles

你可以用一个css编译器运行摩卡,编译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 

我和这里的答案一样 ,这就是我曾经在Babel 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文件夹中进行testing。 您可以使用require.extensions添加尽可能多的扩展名。

由于您使用的是webpack,因此当webpack在组件中遇到所需的CSS / LESS / SASS / etc文件时,请使用null-loader加载null 。 通过npm安装,然后更新你的webpackconfiguration,包括加载器:

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

显然这会阻止你在你的实际应用程序中加载CSS,所以你需要为使用这个加载器的testing包创build一个单独的webpackconfiguration。

这些解决scheme都不适用于我,因为我正在使用mocha-webpack,并且不接受“–compilers”开关。 我实现了ignore-styles包,就像最受欢迎的答案中所描述的那样,但是它似乎是惰性的,在我的伊斯坦布尔报道中没有任何区别(.less文件还在testing中)。

问题是我在webpack.config.test.js文件中使用的.less加载器。 简单地交换less加载器的空加载器修复了我的问题。

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

对我来说,这是迄今为止最简单的解决scheme,直接针对我的testingconfiguration,而不必改变/添加到package.json脚本,或者更糟糕的是添加新的.js文件。

一个简单的方法是导入“忽略样式”; 在你的testingclass