使用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

mocha+ React + enzyme 单元测试