使用 Enzyme 测试 React 组件的 setState 函数-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发过程中，组件内部经常需要使用 setState 函数来更新组件的状态。但是在测试中，测试这个函数可能会比较困难。这时候我们可以使用 Enzyme 这个工具来测试组件中的 setState函数。本文将介绍如何使用 Enzyme 来测试 React 组件的 setState 函数。

Enzyme 简介

Enzyme 是由 airbnb 开源的一套 React 测试工具。其 API 易于使用，能够快速编写测试用例以测试 React 应用的各个方面。Enzyme 提供了三个测试工具：

shallow：能够只渲染被测试组件的直接子组件
mount：能够在渲染的组件上实际操作 DOM 元素
render：能够将组件渲染为静态 HTML，并分析其结构

使用 Enzyme 测试 setState 函数

假设我们需要测试一个简单的计数器组件，该组件的渲染结果为一个按钮和一个展示数字的标签。

// javascriptcn.com 代码示例
import React, { Component } from 'react';

class Counter extends Component {
   state = {
      count: 0
   }
   handleIncrement = () => {
      this.setState({
         count: this.state.count + 1
      })
   }
   render() {
      return (
         <div>
            <button onClick={this.handleIncrement}>+1</button>
            <span>{this.state.count}</span>
         </div>
      )
   }
}
export default Counter;

我们想要测试点击按钮时，计数器组件的状态是否被正确地更新。如果我们直接测试 handleIncrement 函数的效果，我们可以通过模拟按钮点击来测试该函数的功能。

it('增加计数器的测试', () => {
  const wrapper = shallow(<Counter />);
  const button = wrapper.find('button');
  button.simulate('click');
  const text = wrapper.find('span').text();
  expect(text).toEqual('1');
});

但是我们很难知道 handleIncrement 函数的内部实现是否被正确调用。为了测试 handleIncrement 函数对状态的设置是否正确，我们需要测试 setState 函数的作用。

从外部也无法直接测试组件 state 的改变，因为 state 完全是组件内部状态，外部测试无法直接访问到。这时我们就需要使用 Enzyme 提供的 state 函数。

it('setState 函数测试', () => {
  const wrapper = shallow(<Counter />);
  const button = wrapper.find('button');
  button.simulate('click');
  expect(wrapper.state('count')).toBe(1);
});

state 函数能够返回当前组件的 state，可以用它来检查 state 中的值是否被正确的改变了。

总结

本文介绍了如何使用 Enzyme 来测试 React 组件中的 setState 函数。通过使用 Enzyme 提供的 state 函数，我们可以测试组件 state 的改变是否被正确地设置。相信读者们在读完本文后，能够更加帮助大家编写高质量的测试用例，从而保证代码的质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540b5b77d4982a6eba3f31e