enzyme 如何测试 React 组件中的异步方法-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发中，组件的异步方法是一种常见的场景。这些方法可能是异步的数据请求、定时器或者浏览器事件等。测试这些方法是保证组件质量的重要一环。Enzyme 是一个 React 组件测试工具，本文将介绍如何使用 Enzyme 测试 React 组件中的异步方法。

Enzyme 简介

Enzyme 是由 Airbnb 开发的一个 React 组件测试工具。它提供了一套简单易用的 API，可以抽象出 React 组件的 DOM 树结构，使得在测试 React 组件时能够轻松地进行操作和判断。

异步方法测试

在 React 组件中，异步方法一般都是在 componentDidMount 或者 componentDidUpdate 生命周期函数中被调用的。因此，在测试这些方法时，需要模拟组件的生命周期并等待异步方法的执行结果。

下面是一个简单的 React 组件，包含一个异步方法 fetchData：

// www.javascriptcn.com code example
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = { data: {} };
  }

  componentDidMount() {
    this.fetchData();
  }

  async fetchData() {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    let data = await response.json();

    this.setState({ data: data });
  }

  render() {
    return <div>{this.state.data.title}</div>;
  }
}

export default MyComponent;

现在，我们来使用 Enzyme 编写测试用例，测试这个组件。

安装 Enzyme：

npm install --save-dev enzyme enzyme-adapter-react-16

创建测试文件 MyComponent.test.js，初始化 Enzyme 并测试组件异步方法：

// www.javascriptcn.com code example
import React from 'react';
import { shallow, mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should fetch data', async () => {
    const wrapper = shallow(<MyComponent />);
    const instance = wrapper.instance();

    // 模拟异步方法
    const fetchDataSpy = jest.spyOn(instance, 'fetchData').mockImplementation(() => {
      return new Promise(resolve => {
        resolve();
      });
    });

    // 模拟 lifecycle 方法并等待异步方法的执行结果
    await wrapper.instance().componentDidMount();

    // 检查组件状态
    expect(wrapper.state('data')).toEqual({ title: 'delectus aut autem' });

    // 恢复异步方法
    fetchDataSpy.mockRestore();
  });
});

测试代码分为三个部分：

初始化 Enzyme：使用 shallow 方法浅渲染组件，获取组件实例 instance。
模拟异步方法：使用 Jest 的 spyOn 方法模拟组件方法，使得组件方法不会真正执行，而是能够通过 resolve 方法返回一个 Promise。
模拟生命周期并等待异步方法：调用组件的生命周期方法 componentDidMount，使用 await 等待异步方法执行完毕。
检查组件状态：使用 state 方法获取组件状态，判断异步方法是否成功获取到数据。
恢复异步方法：恢复被 mock 的异步方法。

结束语

本文介绍了如何使用 Enzyme 测试 React 组件中的异步方法。在测试组件异步方法时，需要模拟生命周期方法，并等待异步方法执行完毕，使用 Enzyme 的断言方法可以轻松地检查组件状态和行为。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c146d9314edc268491c0cf

enzyme 如何测试 React 组件中的异步方法

Enzyme 简介

异步方法测试

结束语

接着读