由于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
