越来越多的人，使用React开发Web应用。它的测试就成了一个大问题。
React的组件结构和JSX语法，不适用传统的测试工具，必须有新的测试方法和工具。
本文总结目前React测试的基本做法和最佳实践，手把手教你如何写React测试。
一、Demo应用
#请先安装Demo。
```
$ git clone https://github.com/ruanyf/react-testing-demo.git
$ cd react-testing-demo && npm install
$ npm start> 引用
```
然后，打开http://127.0.0.1:8080/, 你会看到一个 Todo 应用。
接下来，我们就要测试这个应用，一共有5个测试点。
1. 应用标题应为"Todos"
2. Todo项的初始状态（"未完成"或"已完成"）应该正确
3. 点击一个Todo项，它就反转状态（"未完成"变为"已完成"，反之亦然）
4. 点击删除按钮，该Todo项就被删除
5. 点击添加按钮，会新增一个Todo项
这5个测试用例都已经写好了，执行一下就可以看到结果。
```
$ npm test
```
下面就来看，测试用例应该怎么写。测试框架我用的是Mocha，如果你不熟悉，可以先读我写的《Mocha教程》。
## 二、测试工具库
React测试必须使用官方的测试工具库，但是它用起来不够方便，所以有人做了封装，推出了一些第三方库，其中Airbnb公司的Enzyme最容易上手。
这就是说，同样的测试用例至少有两种写法，本文都将介绍。
- 官方测试工具库的写法
- 1Enzyme的写法
## 三、官方测试工具库
我们知道，一个React组件有两种存在形式：虚拟DOM对象（即React.Component的实例）和真实DOM节点。官方测试工具库对这两种形式，都提供测试解决方案。
- Shallow Rendering：测试虚拟DOM的方法
- DOM Rendering: 测试真实DOM的方法
### 3.1Shallow Rendering
Shallow Rendering （浅渲染）指的是，将一个组件渲染成虚拟DOM对象，但是只渲染第一层，不渲染所有子组件，所以处理速度非常快。它不需要DOM环境，因为根本没有加载进DOM。
首先，在测试脚本之中，引入官方测试工具库。
```
import TestUtils from 'react-addons-test-utils';
```
### 3.2renderIntoDocument
官方测试工具库的第二种测试方法，是将组件渲染成真实的DOM节点，再进行测试。这时就需要调用renderIntoDocument 方法。
### 3.3findDOMNode
如果一个组件已经加载进入DOM，react-dom模块的findDOMNode方法会返回该组件所对应的DOM节点。
我们使用这种方法来写第四个测试用例，用户点击Todo项时的行为。
## 四、Enzyme库
Enzyme是官方测试工具库的封装，它模拟了jQuery的API，非常直观，易于使用和学习。
它提供三种测试方法。
### 4.1 shallow
shallow方法就是官方的shallow rendering的封装。
下面是第一个测试用例，测试App的标题。
### 4.2 render
render方法将React组件渲染成静态的HTML字符串，然后分析这段HTML代码的结构，返回一个对象。它跟shallow方法非常像，主要的不同是采用了第三方HTML解析库Cheerio，它返回的是一个Cheerio实例对象。
下面是第二个测试用例，测试所有Todo项的初始状态。
### 4.3 mount
mount方法用于将React组件加载为真实DOM节点。
下面是第三个测试用例，测试删除按钮。
网友评论