• Mocha: 用于运行测试用例
  • Chai: Mocha 用的断言库
  • Sinon: 用于创建一些 mocks/stubs/spys

AriBnB 创建了一个专门针对 React 代码测试的开源程序: Enzyme

Mocha 安装及环境配置

npm install --save-dev mocha chai sinon
`</pre>

安装支持 ES6 语法的插件

<pre>`npm install --save-dev babel-register
`</pre>

### 简单测试用例

Mocha 默认会去当前目录下寻找 test 目录, 然后在其中去找后缀为 js 的文件.
如果需要修改这个目录, 可以用 Mocha 的参数设置.

<pre>`// index.spec.js

import { expect } from 'chai';
describe('hello react spac', () =&gt; {
  it('works!', ()=&gt;{
    expect(true).to.be.true;
  });
});
`</pre>

命令行

<pre>`mocha --compilers js:babel-register
`</pre>

如果不添加`--compilers js:babel-register`, 那么 mocha 会按照默认的方式执行, 也就是`读取 spec 文件 -&gt; 运行测试用例`. 使用了`--compilers js:babel-register` 之后, 执行顺序为`读取 spec 文件 -&gt; 将 ES6 代码替换 ES5 代码 -&gt; 运行测试用例`

#### 创建测试工具库 test_helper.js

注意每个测试文件中都要引入 expect, 最好用一个库来进行管理. 创建一个新的文件
`/test/test_helper.js`

<pre>`// test/test_helper.js

import { expect } from 'chai'
import sinon from 'sinon'

global.expect = expect;
global.sinon = sinon;
`</pre>

这里只添加了 chai 的 expect 以及引入了 sinon

现在可以将`index.spec.js` 的第一行删除, 并运行

<pre>`mocha --compilers js:babel-register --require ./test/test_helper.js --recursive
`</pre>

或者在 package.json 中创建 scripts

<pre>`"test"::"mocha --compilers js:babel-register --requrie ./test/test_helper.js --recursive",
"test:watch": "npm test -- --watch"