我的React组件都充实了,我想学习如何使用Mocha + chai正确测试这些组件。我为package.json
(相关的)配置了这些配置:
"scripts": {
"start": "http-server",
"build": "watchify main.js -t babelify -o bundle.js",
"test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register test/test*.js"
},
"devDependencies": {
"babel": "^5.6.23",
"babelify": "^6.1.3",
"browserify": "^11.0.0",
"chai": "^3.5.0",
"jsdom": "^9.8.3",
"mocha": "^3.2.0",
"react-addons-test-utils": "^15.4.1"
},
"babel": {
"presets": [
"es2015"
]
}
我有Skill.js
:
import React from 'react';
import _ from 'underscore';
export default class Skills extends React.Component {
render() {
return (
<div>
<h1>T E S T</h1>
</div>
)
}
}
以及名为test.js
的文件夹中的test
:
import React from 'react';
import { expect, assert } from 'chai';
import Skills from '../src/components/Skills.js';
我运行npm test
时收到意外的令牌错误。
控制台在抱怨什么?为什么<div>
标记无效?
答案 0 :(得分:0)
您需要在使用前安装babel-preset-es2015
npm install --save-dev babel-preset-es2015
答案 1 :(得分:0)
我有一个类似的问题,起初我以为我没有import React from 'react';
。
接下来我发现我没有添加--require ./test/test_helper.js
最后但是在仍然没有工作之后,我突然意识到我没有重启节点。这为我解决了。