我是Mocha的新手,我正在尝试用它来测试一个简单的React组件 . 如果react组件没有任何CSS样式,则测试将通过,但如果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');
});
})
测试将通过:
> 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 | }
我'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'目前正在使用:
Node Express服务器
应对
反应路由器
的WebPack
巴别塔
摩卡
柴
兴农
兴农柴
7 回答
有一个
babel/register
样式钩子可以忽略样式导入:https://www.npmjs.com/package/ignore-styles
安装它:
npm install --save-dev ignore-styles
运行没有样式的测试:
mocha --require ignore-styles
一种简单的方法是导入'ignore-styles';在你的测试类..
对于那些想要在_554494中处理这个问题的人 - 你只需为样式文件添加一个处理程序:
更多here .
这些解决方案都不适合我,因为我使用mocha-webpack,它不接受“--compilers”开关 . 我实现了ignore-styles包,如最受欢迎的答案所述,但它似乎很惰性,我的伊斯坦布尔覆盖率报告没有区别(.less文件仍在测试中) .
问题是我在webpack.config.test.js文件中使用的.less加载程序 . 只需交换较少的装载机null-loader解决了我的问题 .
对我来说,这是迄今为止最简单的解决方案,直接针对我的测试配置,而不是必须更改/添加到package.json脚本,或者更糟糕的是,添加新的.js文件 .
由于您正在使用webpack,因此当webpack遇到组件中所需的CSS / LESS / SASS / etc文件时,请使用null-loader加载
null
. 通过npm安装,然后更新您的webpack配置以包含加载器:显然这会阻止您在实际应用程序中加载CSS,因此您需要为使用此加载器的测试包提供单独的webpack配置 .
你可以使用css编译器运行mocha,编译器js如下:
CSS-DNT-compiler.js
并运行像这样的mocha命令:
My same answer as here,这是我以前用于Babel 6的工作
package.json
tools/testHelper.js
这使您可以在组件旁边的src文件夹中进行测试 . 您可以使用require.extensions添加任意数量的扩展名 .