越來越多的人幕袱，使用React開發(fā)Web應(yīng)用仪际。它的測試就成了一個大問題祝谚。
React的組件結(jié)構(gòu)和JSX語法宪迟，不適用傳統(tǒng)的測試工具，必須有新的測試方法和工具交惯。
本文總結(jié)目前React測試的基本做法和最佳實踐次泽，手把手教你如何寫React測試。
一席爽、Demo應(yīng)用
#請先安裝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 應(yīng)用拳昌。
接下來袭异，我們就要測試這個應(yīng)用，一共有5個測試點炬藤。
1. 應(yīng)用標(biāo)題應(yīng)為"Todos"
2. Todo項的初始狀態(tài)（"未完成"或"已完成"）應(yīng)該正確
3. 點擊一個Todo項御铃，它就反轉(zhuǎn)狀態(tài)（"未完成"變?yōu)?已完成"，反之亦然）
4. 點擊刪除按鈕沈矿，該Todo項就被刪除
5. 點擊添加按鈕上真，會新增一個Todo項
這5個測試用例都已經(jīng)寫好了，執(zhí)行一下就可以看到結(jié)果羹膳。
```
$ npm test
```
下面就來看睡互，測試用例應(yīng)該怎么寫。測試框架我用的是Mocha陵像，如果你不熟悉就珠，可以先讀我寫的《Mocha教程》。
## 二醒颖、測試工具庫
React測試必須使用官方的測試工具庫妻怎，但是它用起來不夠方便，所以有人做了封裝泞歉，推出了一些第三方庫逼侦，其中Airbnb公司的Enzyme最容易上手。
這就是說腰耙，同樣的測試用例至少有兩種寫法榛丢，本文都將介紹。
- 官方測試工具庫的寫法
- 1Enzyme的寫法
## 三挺庞、官方測試工具庫
我們知道晰赞，一個React組件有兩種存在形式：虛擬DOM對象（即React.Component的實例）和真實DOM節(jié)點。官方測試工具庫對這兩種形式，都提供測試解決方案宾肺。
- Shallow Rendering：測試虛擬DOM的方法
- DOM Rendering: 測試真實DOM的方法
### 3.1Shallow Rendering
Shallow Rendering （淺渲染）指的是溯饵，將一個組件渲染成虛擬DOM對象侵俗，但是只渲染第一層锨用，不渲染所有子組件，所以處理速度非嘲ィ快增拥。它不需要DOM環(huán)境，因為根本沒有加載進(jìn)DOM寻歧。
首先掌栅，在測試腳本之中，引入官方測試工具庫码泛。
```
import TestUtils from 'react-addons-test-utils';
```
### 3.2renderIntoDocument
官方測試工具庫的第二種測試方法猾封，是將組件渲染成真實的DOM節(jié)點，再進(jìn)行測試噪珊。這時就需要調(diào)用renderIntoDocument 方法晌缘。
### 3.3findDOMNode
如果一個組件已經(jīng)加載進(jìn)入DOM，react-dom模塊的findDOMNode方法會返回該組件所對應(yīng)的DOM節(jié)點痢站。
我們使用這種方法來寫第四個測試用例磷箕，用戶點擊Todo項時的行為。
## 四阵难、Enzyme庫
Enzyme是官方測試工具庫的封裝岳枷，它模擬了jQuery的API，非常直觀呜叫，易于使用和學(xué)習(xí)空繁。
它提供三種測試方法。
### 4.1 shallow
shallow方法就是官方的shallow rendering的封裝朱庆。
下面是第一個測試用例家厌，測試App的標(biāo)題。
### 4.2 render
render方法將React組件渲染成靜態(tài)的HTML字符串椎工，然后分析這段HTML代碼的結(jié)構(gòu)饭于，返回一個對象。它跟shallow方法非常像维蒙，主要的不同是采用了第三方HTML解析庫Cheerio掰吕，它返回的是一個Cheerio實例對象。
下面是第二個測試用例颅痊，測試所有Todo項的初始狀態(tài)殖熟。
### 4.3 mount
mount方法用于將React組件加載為真實DOM節(jié)點。
下面是第三個測試用例斑响，測試刪除按鈕菱属。
