使用mocha进行react的单元测试
安装
首先初始化package.json
npm install
安装必要依赖
npm install mocha react react-dom babel-core
babel babel-preset-react babel-preset-es2015
expect.js react-addons-test-utils --save-dev
对babel的配置如下，支持es6和jsx
{
presets:["es2015","react"]
}
现在新建src,test目录存放我们的源码文件与测试文件,另外增加一个约定，所有的test测试程序都以-test.js结尾,例如下面将要创建的component-test.js文件
mkdir src test
mocha因为安装到本地了，将测试命令写入到package.json中
script:{
"test" : "./node_module/mocha/bin/mocha --compilers js:babel-core/register --watch test/*-test.js"
}
下面是安装好之后的package.json文件
{
"name": "react-utest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register --watch test/*-test.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"enzyme": "^2.3.0",
"expect.js": "^0.3.1",
"mocha": "^2.4.5",
"react": "^15.0.2",
"react-addons-test-utils": "^15.0.2",
"react-dom": "^15.0.2"
}
}
测试组件
###一个简单的组件
在src下面新建一个我们的组件，例如component.jsx，例如
import React from 'react';
class Component extends React.Component{
render(){
return (
<div>
<button className="btn"></button>
</div>
)
}
};
export default Component;
###简单的测试文件 在test下新建一个测试脚本，例如component-test.js
import {shallow} from 'enzyme';
import expect from 'expect.js';
import Component from '../src/Component.jsx';
import React from 'react';
describe('Component Test',function(){
let wrapper=shallow(<Component/>);
it('Component must have Button',function(){
expect(wrapper.children()).to.have.length(1);
});
it('Component must have btn',function(){
expect(wrapper.find('.btn')).to.have.length(1);
});
});
开始测试
当写好测试脚本之后就可以开始测试了,上述只是一个判断组件是否加载正常的测试,运行npm test开始测试
更改一个第二个测试条件后可以看到
特殊的要求
file-loader?
原来一个项目中使用webpack，依赖了一些loader,其中包括了png,css文件
所以如果原来代码中具有 import head from 'head.png' 这样mocha就会执行失败，因为mocha不知道如何处理它。
github上有相应的讨论，解决方法如下 https://github.com/bruderstein/unexpected-react/wiki/Webpack-Loader-issue 亲测可用,原理是对png,css后缀的文件加载时候忽略掉
运行环境
mocha默认是运行在node环境中进行测试的，也即代码中无法引用window,document，解决方法目前知道两种
####使用Karma
https://github.com/karma-runner/karma
####使用jsdom 安装jsdom后下面代码可以模拟一个浏览器环境
import jsdom from 'jsdom'
global.document=jsdom.jsdom();
global.window= document.defaultView
