Jest
一般使用 Enzyme 中的
mounJt或shallow方法，将目标组件转化为一个ReactWrapper对象，并在测试中调用其各种方法：
import Enzyme,{ mount } from 'enzyme';
describe('test ...', function() {
it('should ...', function() {
wrapper = mount(
<MyComp isDisabled={true} />
);
expect( wrapper.find('input').exists() ).toBeTruthy();
});
});
global api
官方文档中有详细介绍，并且有中文版
Enzyme
是官方测试工具库的封装，它模拟了jQuery的API
三种测试方法
shallowrendermount
shallow
方法就是官方的shallow rendering的封装。
- 测试
App的标题。
import {shallow} from 'enzyme';
describe('Enzyme Shallow', function () {
it('the title should be Todos', function () {
const app = shallow(<App/>);
expect(app.find('h1').text()).toEqual('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
render
render方法将React组件渲染成静态的HTML字符串，然后分析这段HTML代码的结构，返回一个对象。它跟shallow方法非常像，主要的不同是采用了第三方HTML解析库Cheerio，它返回的是一个Cheerio实例对象。
- 测试所有Todo项的初始状态。
import {render} from 'enzyme';
describe('Enzyme Render', function () {
it('Todo item should not have todo-done class', function () {
const app = render(<App/>);
expect(app.find('.todo-done').length).to.equal(0);
});
});
// 在上面代码中，你可以看到，`render`方法与`shallow`方法的API基本是一致的。 Enzyme的设计就是，让不同的底层处理引擎，都具有同样的API（比如`find`方法）
mount
mount方法用于将React组件加载为真实DOM节点。注意：与浅层或静态渲染不同，完全渲染实际上将组件安装在DOM中，这意味着如果测试全部使用相同的DOM，则测试可以相互影响。在编写测试时请记住这一点，并在必要时使用
.unmount()或类似清理。
- 测试删除按钮。
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Delete Todo', function () {
const app = mount(<App/>);
const 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`方法就在这个组件上触发某种行为。
- 测试Todo项的点击行为。
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Turning a Todo item into Done', function () {
const app = mount(<App/>);
const todoItem = app.find('.todo-text').at(0);
todoItem.simulate('click');
expect(todoItem.hasClass('todo-done')).to.equal(true);
});
});
- 测试添加新的Todo项。
import {mount} from 'enzyme';
describe('Enzyme Mount', function () {
it('Add a new Todo', function () {
const app = mount(<App/>);
const todoLength = app.find('li').length;
const 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);
});
});
Enzyme部分API
api基本与jquery相同，可在官网查看api，以下是常用的几个api
.get(index)：返回指定位置的子组件的DOM节点
.at(index)：返回指定位置的子组件
.first()：返回第一个子组件
.last()：返回最后一个子组件
.type()：返回当前组件的类型
.text()：返回当前组件的文本内容
.html()：返回当前组件的HTML代码形式
.props()：返回根组件的所有属性
.prop(key)：返回根组件的指定属性
.state([key])：返回根组件的状态
.setState(nextState)：设置根组件的状态
.setProps(nextProps)：设置根组件的属性
