Enzyme 测试 React 组件时如何模拟异步请求和延迟加载

Enzyme 是 React 组件测试工具中非常流行的一个库，它提供了一系列 API，帮助我们方便地测试 React 组件的行为和状态。在测试 React 组件时，我们经常需要模拟异步请求和延迟加载的场景，本文将介绍如何使用 Enzyme 来实现这些功能。

模拟异步请求

在 React 组件中，我们经常会使用异步请求来获取数据或者更新组件状态。在测试组件时，我们需要模拟这些异步请求，以便测试我们的组件在不同的数据状态下的行为。

Enzyme 提供了 mount 和 shallow 两个 API 来渲染组件，我们可以使用这些 API 来模拟异步请求。例如，我们可以使用 jest.mock 来模拟一个异步请求：

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

import MyComponent from './MyComponent';
import api from './api';

jest.mock('./api');

describe('MyComponent', () => {
  it('should render with data from API', async () => {
    const data = { name: 'John' };
    api.getData.mockResolvedValue(data);

    const wrapper = mount(<MyComponent />);
    await Promise.resolve(); // 等待异步请求完成

    expect(wrapper.find('h1').text()).toEqual(`Hello, ${data.name}!`);
  });
});

在上面的例子中，我们使用 jest.mock 来模拟 ./api 模块，然后使用 mockResolvedValue 方法来模拟异步请求返回的数据。接着，我们使用 mount 方法来渲染 MyComponent 组件，并使用 await 等待异步请求完成，最后断言组件渲染后的结果是否符合预期。

模拟延迟加载

有些组件在渲染时需要进行延迟加载，例如图片懒加载、分页加载等等。在测试这些组件时，我们需要模拟延迟加载的场景，以便测试组件在加载过程中的行为。

Enzyme 提供了 mount 和 shallow 两个 API 来渲染组件，我们可以使用这些 API 来模拟延迟加载。例如，我们可以使用 setTimeout 来模拟一个延迟加载的场景：

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

import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render with lazy loaded image', async () => {
    const wrapper = mount(<MyComponent />);
    expect(wrapper.find('img').prop('src')).toEqual('placeholder.jpg');

    await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟延迟加载

    expect(wrapper.find('img').prop('src')).toEqual('image.jpg');
  });
});

在上面的例子中，我们使用 mount 方法来渲染 MyComponent 组件，并断言组件渲染后的 img 元素的 src 属性是否为 placeholder.jpg。接着，我们使用 setTimeout 来模拟延迟加载，等待一定时间后再断言 img 元素的 src 属性是否为 image.jpg。

总结

在测试 React 组件时，我们经常需要模拟异步请求和延迟加载的场景。Enzyme 提供了 mount 和 shallow 两个 API，可以帮助我们方便地模拟这些场景。在模拟异步请求时，我们可以使用 jest.mock 来模拟异步请求的模块，然后使用 mockResolvedValue 方法来模拟异步请求返回的数据。在模拟延迟加载时，我们可以使用 setTimeout 来模拟延迟加载的场景。掌握这些技巧可以帮助我们更好地测试 React 组件的行为和状态。

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