使用mocha进行react的单元测试

安装

首先初始化package.json

@H_403_6@npm install

安装必要依赖

@H_403_6@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

@H_403_6@{ presets:["es2015","react"] }

现在新建src,test目录存放我们的源码文件与测试文件,另外增加一个约定，所有的test测试程序都以-test.js结尾,例如下面将要创建的component-test.js文件

@H_403_6@mkdir src test

mocha因为安装到本地了，将测试命令写入到package.json中

@H_403_6@script:{ "test" : "./node_module/mocha/bin/mocha --compilers js:babel-core/register --watch test/*-test.js" }

下面是安装好之后的package.json文件

@H_403_6@{ "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，例如

@H_403_6@import React from 'react'; class Component extends React.Component{ render(){ return ( <div> <button className="btn"></button> </div> ) } }; export default Component;

###简单的测试文件 在test下新建一个测试脚本，例如component-test.js

@H_403_6@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后下面代码可以模拟一个浏览器环境

@H_403_6@import jsdom from 'jsdom' global.document=jsdom.jsdom(); global.window= document.defaultView