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 (

{this.props.children}

);

}

};

export default Button;

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

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

it(‘should call onClick callback if provided’, () => {

const onClickMock = jest.fn();

const testInstance = ReactTestUtils.renderIntoDocument(

hello

);

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(hello);

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(hello);

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(hello);

wrapper.find(‘.my-button’).simulate(‘click’);

expect(onClickMock).toHaveBeenCalled();

});

});

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

写在最后

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

文章来源：网络 版权归原作者所有

上文内容不用于商业目的，如涉及知识产权问题，请权利人联系小编，我们将立即处理