## 四、Enzyme库
[Enzyme](https://github.com/airbnb/enzyme)是官方测试工具库的封装，它模拟了jQuery的API，非常直观，易于使用和学习。
它提供三种测试方法。
* `shallow`
* `render`
* `mount`
### 4.1 shallow
[shallow](https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md)方法就是官方的shallow rendering的封装。
下面是第一个[测试用例](https://github.com/ruanyf/react-testing-demo/blob/master/test/enzyme1.test.js#L6)，测试`App`的标题。
~~~
import {shallow} from 'enzyme';
describe('Enzyme Shallow', function () {
it('App\'s title should be Todos', function () {
let app = shallow(<App/>);
expect(app.find('h1').text()).to.equal('Todos');
});
};
~~~
上面代码中，`shallow`方法返回`App`的浅渲染，然后`app.find`方法找出`h1`元素，`text`方法取出该元素的文本。
关于`find`方法，有一个注意点，就是它只支持简单选择器，稍微复杂的一点的CSS选择器都不支持。
~~~
component.find('.my-class'); // by class name
component.find('#my-id'); // by id
component.find('td'); // by tag
component.find('div.custom-class'); // by compound selector
component.find(TableRow); // by constructor
component.find('TableRow'); // by display name
~~~
### 4.2 render
[`render`](https://github.com/airbnb/enzyme/blob/master/docs/api/render.md)方法将React组件渲染成静态的HTML字符串，然后分析这段HTML代码的结构，返回一个对象。它跟`shallow`方法非常像，主要的不同是采用了第三方HTML解析库Cheerio，它返回的是一个Cheerio实例对象。
下面是第二个[测试用例](https://github.com/ruanyf/react-testing-demo/blob/master/test/enzyme1.test.js#L13)，测试所有Todo项的初始状态。
~~~
import {render} from 'enzyme';
describe('Enzyme Render', function () {
it('Todo item should not have todo-done class', function () {
let app = render(<App/>);
expect(app.find('.todo-done').length).to.equal(0);
});
});
~~~
在上面代码中，你可以看到，`render`方法与`shallow`方法的API基本是一致的。 Enzyme的设计就是，让不同的底层处理引擎，都具有同样的API（比如`find`方法）。
### 4.3 mount
[`mount`](https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md)方法用于将React组件加载为真实DOM节点。
下面是第三个[测试用例](https://github.com/ruanyf/react-testing-demo/blob/master/test/enzyme1.test.js#L21)，测试删除按钮。
~~~
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Delete Todo', function () {
let app = mount(<App/>);
let todoLength = app.find('li').length;
app.find('button.delete').at(0).simulate('click');
expect(app.find('li').length).to.equal(todoLength - 1);
});
});
~~~
上面代码中，`find`方法返回一个对象，包含了所有符合条件的子组件。在它的基础上，`at`方法返回指定位置的子组件，`simulate`方法就在这个组件上触发某种行为。
下面是第四个[测试用例](https://github.com/ruanyf/react-testing-demo/blob/master/test/enzyme1.test.js#L28)，测试Todo项的点击行为。
~~~
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Turning a Todo item into Done', function () {
let app = mount(<App/>);
let todoItem = app.find('.todo-text').at(0);
todoItem.simulate('click');
expect(todoItem.hasClass('todo-done')).to.equal(true);
});
});
~~~
下面是第五个[测试用例](https://github.com/ruanyf/react-testing-demo/blob/master/test/enzyme1.test.js#L35)，测试添加新的Todo项。
~~~
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Add a new Todo', function () {
let app = mount(<App/>);
let todoLength = app.find('li').length;
let addInput = app.find('input').get(0);
addInput.value = 'Todo Four';
app.find('.add-button').simulate('click');
expect(app.find('li').length).to.equal(todoLength + 1);
});
});
~~~
### 4.4 API
下面是Enzyme的一部分API，你可以从中了解它的大概用法。
* `.get(index)`：返回指定位置的子组件的DOM节点
* `.at(index)`：返回指定位置的子组件
* `.first()`：返回第一个子组件
* `.last()`：返回最后一个子组件
* `.type()`：返回当前组件的类型
* `.text()`：返回当前组件的文本内容
* `.html()`：返回当前组件的HTML代码形式
* `.props()`：返回根组件的所有属性
* `.prop(key)`：返回根组件的指定属性
* `.state([key])`：返回根组件的状态
* `.setState(nextState)`：设置根组件的状态
* `.setProps(nextProps)`：设置根组件的属性
