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

发表于:2018-6-07 17:28

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:loveky的流水账    来源:51Testing软件测试网采编

  在本文中我们会具体聊聊如何用 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 仓库中获取。



上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号