Jest+Enzyme的单元测试技巧总结

技术选型

• jest: 支持断言、Mock、Snapchat、Async测试、测试覆盖率等
• enzyme：模拟了jQuery的APi，比较直观，学习使用都比较简单

测试的原则

• 测试代码时，只考虑测试，不考虑内部实现
• 数据尽量模拟现实，越靠近现实越好
• 对重点、复杂、核心代码，重点测试
• 利用AOP(beforeEach、afterEach),减少测试代码数量，避免无用功能
  测试、功能开发相结合，有利于设计和代码重构
• 测试过程中出现 Bug 的情况

当前被测项目采用的是BDD模式，通过测试case根据原有业务需求的理解，对代码的质量以及主业务逻辑进行的测试case的编写。

测试技巧

Enzyme的三种渲染方式

首先是准备了待测组件button.js:

import React, { PureComponent } from 'react';
import Empty from './../../client/components/Empty';
class Button extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            name: ""
        };
    }
    componentDidMount () {
       if (!this.state.name) {
            this.setState({
                name: this.props.value
            });
        }
    }
    render() {
        return (
            <div>
                <Empty text="无数据" />
                <button {...this.props} />
            </div>
        );
    }
}
export default Button;

为了区别shallow和render的区别，增加了一个empty的子组件, dom结构如下：

<div className='empty-view-wrapper'>
    <img src={EmptyImg} />
    <div className='text-content'>{text}</div>
</div>

浅层渲染shallow Rendering（shallow）

根据官方的说法是说，通过这种渲染方式，可以访问到React的生命周期方法。而且，shallow只能渲染当前组件，对当前组件做断言，不涉及到子组件的渲染。它的性能上最快的，大部分情况下，如果不深入组件内部测试，那么可以使用shallow渲染。

测试用例button.test.js, shallow渲染生成对应的快照对比:

import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

test("shallow snapshot:", () => {
	const wrapper = shallow(<Button {...props} />);
	expect(toJson(wrapper)).toMatchSnapshot();
});

shallow snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Button:  snapshot： 1`] = `
<div>
  <Empty
    text="无数据"
  />
  <button
    type="success"
    value="提交"
  />
</div>
`;

完全渲染full Rendering（mount）

它会进行完整渲染，会渲染当前组件以及所有子组件，渲染的结果和浏览器渲染结果是一样的。
测试用例button.test.js, shallow渲染生成对应的快照对比:

const wrapper = mount(<Button {...props} />);

mount snapshot: