由于Webpack中的CSS,Mocha测试失败 [英] Mocha testing failed due to css in webpack
问题描述
我是Mocha的新手,我正试图用它来测试一个简单的React组件.如果react组件没有任何CSS样式,则测试将通过,但是如果React组件中的标签包含任何className,则会引发语法错误:
I'm new to Mocha and I am trying to use it to test a simple React component. The test would pass if the react component doesn't have any CSS styling but throws a syntax error if the tag within the React component contains any className:
Testing.react.js
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
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之后,出现错误:
after I added the className inside of the input tag an error shows up:
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 | }
我已经在网上搜索过,但到目前为止还没有运气.我想念什么吗?请帮助我或指出正确的方向,将不胜感激.
我当前正在使用:
节点Express服务器
反应
反应路由器
Webpack
巴别塔
摩卡咖啡
柴
诗乃
诗乃柴
I've searched online but no luck so far. Am I missing something? Please help me out or point me to the right direction would be greatly appreciated.
I'm currently using:
Node Express Server
React
React-router
Webpack
Babel
Mocha
Chai
Sinon
Sinon-Chai
推荐答案
有一个babel/register
样式钩子可以忽略样式导入:
There is a babel/register
style hook to ignore style imports:
https://www.npmjs.com/package/ignore-styles
安装:
npm install --save-dev ignore-styles
运行没有样式的测试:
mocha --require ignore-styles
这篇关于由于Webpack中的CSS,Mocha测试失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!