react-components-docs/react组件测试流程和规范.md

2.1 KiB
Raw Blame History

#React组件测试流程和规范

测试依赖

  • mocha
  • chai
  • jsdom
  • enzyme

试用Enzyme测试

  • shallow Rendering 测试虚拟dom
  • DOM Rendering 测试真实dom

shallow

浅渲染将组件渲染成虚拟dom对象但是只渲染第一层不渲染所有子组件

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代码结构。

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

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):设置根组件的属性