利用 Jest 为 React 组件编写单元测试

在上一篇文章中我们介绍了什么是单元测试以及单元测试框架 Jest 的基本用法。在本文中我们会具体聊聊如何用 Jest 为 React 组件编写单元测试。

首先我们要明确的一点，那就是 React 组件的单元测试本质是也是单元测试。因此它也符合我们之前介绍过的单元测试的全部特点。唯一不同的地方在于 React 组件的单元测试中我们需要找到合适的方法对执行结果进行断言。换言之，我们要根据 React 的特点来设置代码是否正确执行的判断条件。

那么 React 组件和其它的被测试对象有何不同呢？仔细想过，我们会发现：

React 组件的 render 结果是一个组件树，并且整个树最终会被解析成一个纯粹由 HTML 元素构成的树形结构
React 组件可以拥有 state，且 state 的变化会影响 render 结果
React 组件可以拥有生命周期函数，这些生命周期函数会在特定时间点执行

知道了要测试的内容，接下来的问题就是如何执行一个 React 组件并编写断言了。如何执行一个 React 组件呢？看到这个问题估计大多数儿人是蒙的。平时不就是直接 ReactDOM.render 吗？不错，ReactDOM.render 确实可以执行一个 React 组件并将它渲染到页面中，但这种方式不利于编写测试代码。

有没有更简单的方式呢？其实 React 已经帮我们提供好了工具，让我们一起来看看。

React 提供的测试工具

在 React 的官方文档中提到了两个用于测试 React 组件的库。让我们分别介绍。

react-test-renderer

在说 react-test-renderer 之前，让我们先聊聊什么是 renderer。React 最早是被用来开发网页的，所以早期的 React 库中还包含了大量和 DOM 相关的逻辑。后来 React 的设计思想慢慢被迁移到其它场景，最被人们熟知的莫过于 React Native 了。为了灵活性和扩展性，React 的代码被分拆为 React 核心代码与各种 renderer。React 自带了 3 个 renderer，前两个是大家常见的：

react-dom 负责将组建渲染到浏览器页面中。
react-native-renderer 负责将组件渲染成原生场景中的各种 “View”。

而今天提到的 react-test-renderer 则负责将组件输出成 JSON 对象以方便我们遍历、断言或是进行 snapshot 测试。

备注：这里有一份各种各样的 renderer 列表。

react-dom/test-utils

首先从名称可以看出这个库是包含在 react-dom 中的。所以它只是 react-dom 的辅助测试工具。在 React 文档站中它的介绍页上用的标题却只有 “Test Utilities” 两个单词，很容易让人产生误解。该库中的方法主要作用是帮我们遍历 ReactDOM 生成的 DOM 树，方便我们编写断言。注意：使用该库时必须提供一个 DOM 环境。当然这个 DOM 环境可以是 jsdom 这种模拟环境。(Jest 默认的执行环境就是 jsdom)

如何选择？

读到这你可能会问，react-test-renderer 和 react-dom/test-utils 两者看起来还是很相似。何时该选择哪一个库呢？根据笔者实际使用经验，简单来说：

如果需要测试事件（如 click, change, blur 等），那么使用 react-dom/test-utils
其它时候使用更简单、灵活的 react-test-renderer

react-test-renderer 使用方法

react-test-renderer 在实际使用过程中又有两种用法：

shallow render：组件只会被 render 一层（children 中的 React 组件不会被 render）
full render：组件会被完全 render

现在让我们通过例子来具体看看两种方式的差别。

假设我们有以下两个组件：

const Link = ({to, children}) => (
  <a className="my-link" href={to} target="_blank" rel="noopener noreferrer">{children}</a>
);

const Header = () => (
  <div>
    <span className="brand">Hello world</span>
    <Link to="https://jd.com">JD</Link>
    <Link to="http://butler.jd.com">Butler</Link>
    <Link to="http://lrc.jd.com">lrc</Link>
  </div>
);

shallow render

shallow render 相关的工具类存在于 react-test-renderer/shallow 空间下，我们首先引入，并创建一个实例：

import ShallowRenderer from 'react-test-renderer/shallow';

const renderer = new ShallowRenderer();

ShallowRenderer 的实例为我们提供了两个方法：

render() 用于 render 一个组件。你可以把 ShallowRenderer 的实例想象成一个容纳被 render 组件的“空间”。
getRenderOutput() 在 render 之后，可以通过此命令获取 render 的结果。

让我们看看完整的例子：

describe('Header', () => {
  it('should render a top level div', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<Header />);
    const result = renderer.getRenderOutput();
    expect(result.type).toBe('div');
  });

  it('should render 3 Link', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<Header />);
    const result = renderer.getRenderOutput();
    const childrenLink = result.props.children.filter(c => c.type === Link);
    expect(childrenLink.length).toBe(3);
  });
});

我们首先验证了 Header render 后顶层元素是一个 div。接着在第二个用例中验证了 render 结果中包含 3 个 Link 组件的实例。由于 shallow render 只 render 一层，所以可以验证的信息也都比较简单。比较适合验证组件输出的结构是否符合预期。

full render

接下来看看 full render。

首先引入工具库：

import TestRenderer from 'react-test-renderer';

调用 TestRenderer 的 create 方法并传入要 render 的组件就可以获得一个 TestRenderer 的实例。该实例上存在着以下几个方法和属性：

.toJSON()：生成一个表示 render 结果的 JSON 对象。该对象中只包含像 <div>（web 平台）或是 <View （native 平台）这样的原生节点。不会包含用户开发的组件的信息。适合用于 snapshot testing。
.toTree()：和 .toJSON() 类似，但信息更加丰富，包含了用户开发的组件的信息。
.update(element)：通过传入一个新的元素来更新上次 render 得到的组件树。
.umount()：umount 组件树，同时触发相应的生命周期函数。
.getInstance()：返回根节点对应的 React 组件实例，如果存在的话。如果顶级组件是一个函数式组件，则无法获取。
.root：该属性保存了根节点对应的测试实例(test instance)。该实例为我们提供了一系列方法方便我们编写断言。

现在让我们看看测试实例上都有哪些方法和属性可供我们使用(完整列表请参考这里：

.find() 与 .findAll()：用于查找符合特定条件的测试实例。区别在于 .find() 会严格要求节点树种只有 1 个满足条件的测试实例，如果没有或者多于 1 个就会抛出异常。此区别同样适用于下面两组方法。
.findByType() 与 .findAllByType：用于查找特定类型的测试实例。这里的类型可以是 div 这种原生类型，也可以是 Link 这种用户编写的 React 组件。
.findByProps() 与 .findAllByProps()：用于查找 props 符合特定结构的测试实例。
.instance：该测试实例对应的 React 组件实例。

现在让我们看一个完整的测试用例：

describe('Header', () => {
  it('should render 3 a tag with className "my-link"', () => {
    const testRenderer = TestRenderer.create(<Header />);
    const testInstance = testRenderer.root;
    expect(testInstance.findAll(node => node.type === 'a' && node.props.className === 'my-link')).toHaveLength(3);
  });
});

在这个用例中我们通过 .find() 方法查找了 className 为 my-link 的 a 标签并确保找到了 3 个。

react-dom/test-utils 使用方法

现在让我们来看看涉及到用户交互的组件如何编写单元测试。首先简单了解一下 react-dom/test-utils 的基本用法。

首先还是引入工具类：

import  ReactTestUtils  from  'react-dom/test-utils';

ReactTestUtils 对象上我们通常会用到以下一些方法(完整方法列表请参考这里)：

.Simulate.{evnentName}()：模拟在给定的 DOM 节点上触发特点事件。Simulate 可以触发所有 React 支持的事件类型。
renderIntoDocument()：把一个 React 组件 render 到一个 detached 的 DOM 中。注意：该方法依赖 DOM 环境。不过不用担心，Jest 默认集成了 jsdom。该方法会返回被 render 的 React 组件的实例。
scryRenderedDOMComponentsWithClass() 与 findRenderedDOMComponentWithClass()：查找匹配特定类名的 DOM 元素。区别在于 scryRenderedDOMComponentsWithClass() 会查找所有元素。而 findRenderedDOMComponentWithClass() 会假定页面中有且只有 1 个符合条件的元素，否则抛出异常。
scryRenderedDOMComponentsWithTag() 与 findRenderedDOMComponentWithTag()：查找匹配特定标签类型的 DOM 元素。

还是让我们通过一个具体的组件来熟悉下实际用法。

假设我们有以下 Button 组件：

import React from 'react';

class Button extends React.Component {
  constructor() {
    super();

    this.state = { disabled: false };
    this.handClick = this.handClick.bind(this);
  }

  handClick() {
    if (this.state.disabled) { return }
    if (this.props.onClick) { this.props.onClick() }
    this.setState({ disabled: true });
    setTimeout(() => {this.setState({ disabled: false })}, 200);
  }

  render() {
    return (
      <button className="my-button" onClick={this.handClick}>{this.props.children}</button>
    );
  }
};

export default Button;

其主要功能就是点击 button 元素时执行 onClick 回调，并且设置了自上一次点击之后，200 毫秒内按钮进入禁用状态。

首先让我们测试一下执行 onClick 回调这个逻辑：

  it('should call onClick callback if provided', () => {
    const onClickMock = jest.fn();
    const testInstance = ReactTestUtils.renderIntoDocument(
      <Button onClick={onClickMock}>hello</Button>
    );
    const buttonDom = ReactTestUtils.findRenderedDOMComponentWithClass(testInstance, 'my-button');
    ReactTestUtils.Simulate.click(buttonDom);
    expect(onClickMock).toHaveBeenCalled();
  });

这里我们创建了一个 mock 方法 onClickMock 并将它作为回到函数传递给 Button 组件。然后利用 ReactTestUtils.Simulate.click 模拟触发点击事件。最后确认一下 onClickMock 被调用。

注：关于 mock 方法的使用，在上一篇文章中有详细介绍，欢迎阅读。

接下来让我们测试一下点击过后 200 毫秒内进入禁用状态：

  it('should be throttled to 200ms', () => {
    const testInstance = ReactTestUtils.renderIntoDocument(<Button>hello</Button>);
    const buttonDom = ReactTestUtils.findRenderedDOMComponentWithClass(testInstance, 'my-button');
    ReactTestUtils.Simulate.click(buttonDom);
    expect(testInstance.state.disabled).toBeTruthy();
    jest.advanceTimersByTime(199);
    expect(testInstance.state.disabled).toBeTruthy();
    jest.advanceTimersByTime(1);
    expect(testInstance.state.disabled).toBeFalsy();
  });

由于涉及到定时器逻辑，我们在这个用例中使用了 Jest 提供的 timer mock 功能。详细用法请参考 Jest 官方文档。

Enzyme

前面已经介绍完了 React 自带的两个测试工具库。接下来简单介绍一下由 Airbnb 开源的 React 测试工具库 Enzyme。

Enzyme 底层其实也是基于 react-test-renderer 和 react-dom/test-utils 的。但它在二者的基础上进行了封装提供了更加简单易用的查询、断言方法。在概念上，Enzyme 也与二者非常相似。在 Enzyme 中有三种 render 模式：

Shallow Rendering 对应 react-test-renderer/shallow
Full DOM Rendering 对应 react-dom/test-utils
Static Rendering 对应 react-test-renderer

如果你能理解前面对 react-test-renderer 和 react-dom/test-utils 的介绍，那么上手 Enzyme 应该是非常容易的。此处不再详细介绍 Enzyme 的使用方法。

让我们使用 Enzyme 改写一下前面为 Button 组件编写的测试：

describe('Button', () => {
  it('should be throttled to 200ms', () => {
    const wrapper = mount(<Button>hello</Button>);
    wrapper.find('.my-button').simulate('click');
    expect(wrapper.state('disabled')).toBeTruthy();
    jest.advanceTimersByTime(199);
    expect(wrapper.state('disabled')).toBeTruthy();
    jest.advanceTimersByTime(1);
    expect(wrapper.state('disabled')).toBeFalsy();
  });

  it('should call onClick callback if provided', () => {
    const onClickMock = jest.fn();
    const wrapper = mount(<Button onClick={onClickMock}>hello</Button>);
    wrapper.find('.my-button').simulate('click');
    expect(onClickMock).toHaveBeenCalled();
  });
});

现在我们可以通过 Enzyme 提供的 .find() 方法查找 DOM 节点，通过 .state() 方法读取 state。简单不少吧。

写在最后

本文简单介绍了 react-test-renderer 和 react-dom/test-utils 两兄弟以及 Enzyme。具体在项目中选择哪一款工具根据自己喜好选择即可。

本文中全部代码均可在 loveky/unit-testing-react-component 仓库中获取。