110 lines
2.6 KiB
Markdown
110 lines
2.6 KiB
Markdown
#React组件测试流程和规范
|
||
|
||
### 测试依赖
|
||
- mocha
|
||
- chai
|
||
- enzyme
|
||
|
||
### 使用Enzyme测试
|
||
- shallow Rendering 测试虚拟dom
|
||
- DOM Rendering 测试真实dom
|
||
|
||
#### shallow
|
||
浅渲染，将组件渲染成虚拟dom对象，但是只渲染第一层，不渲染所有子组件
|
||
```javascript
|
||
import React from 'react';
|
||
import {shallow, mount, render} from 'enzyme';
|
||
import {expect} from 'chai';
|
||
import Button from '../src/index';
|
||
|
||
describe('Enzyme Shallow', function () {
|
||
it('Button should be exist', function () {
|
||
let button = shallow(<Button/>);
|
||
expect(button.hasClass('u-button')).to.equal(true);
|
||
});
|
||
});
|
||
```
|
||
find只支持简单选择器
|
||
- .find('.classname')
|
||
- .find('#id')
|
||
- .find('tagname')
|
||
- .find('tag.class')
|
||
- .find('displayname')
|
||
- .find(constructor)
|
||
|
||
#### render
|
||
render将组件渲染成静态HTML字符串（通过cheerio解析库解析），可以分析HTML代码结构。
|
||
```javascript
|
||
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);
|
||
});
|
||
});
|
||
```
|
||
#### mount
|
||
mount用于将组件加载为真实DOM
|
||
```javascript
|
||
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);
|
||
});
|
||
});
|
||
```
|
||
`at`返回指定位置的子组件，`simulate`在组件上触发某种行为，第一个参数为事件，第二个参数为传入的参数
|
||
|
||
#### Enzyme API
|
||
- .get(index)：返回指定位置的子组件的DOM节点
|
||
- .at(index)：返回指定位置的子组件
|
||
- .first()：返回第一个子组件
|
||
- .last()：返回最后一个子组件
|
||
- .type()：返回当前组件的类型
|
||
- .text()：返回当前组件的文本内容
|
||
- .html()：返回当前组件的HTML代码形式
|
||
- .props()：返回根组件的所有属性
|
||
- .prop(key)：返回根组件的指定属性
|
||
- .state([key])：返回根组件的状态
|
||
- .setState(nextState)：设置根组件的状态
|
||
- .setProps(nextProps)：设置根组件的属性
|
||
|
||
### chai的expect语法
|
||
[官网](http://chaijs.com/api/bdd/)
|
||
#### 连接关键字
|
||
- to
|
||
- be
|
||
- been
|
||
- is
|
||
- that
|
||
- which
|
||
- and
|
||
- has
|
||
- have
|
||
- with
|
||
- at
|
||
- of
|
||
- same
|
||
|
||
这些关键字会在下面的例子中，有一些功能演示
|
||
|
||
#### 断言
|
||
- .not
|
||
非
|
||
```js
|
||
expect(foo).to.not.equal('bar');
|
||
expect(goodFn).to.not.throw(Error);
|
||
expect({ foo: 'baz' }).to.have.property('foo').and.not.equal('bar');
|
||
```
|
||
|
||
- .deep
|
||
|
||
```js
|
||
|
||
```
|