Enzyme 如何模拟 React 组件中的 fetch 请求-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发中，我们经常需要使用 fetch 来获取数据。但是在测试中，我们不希望实际发起请求，而是希望模拟请求的返回结果。这时候，Enzyme 就可以帮助我们实现这个目标。

Enzyme 简介

Enzyme 是一个 React 组件测试工具，它提供了一些 API 来方便地测试 React 组件的行为和状态。Enzyme 支持三种渲染方式：浅渲染、完全渲染和静态渲染。其中，浅渲染只渲染当前组件，不渲染子组件；完全渲染会递归渲染子组件；静态渲染则不会渲染组件，只会返回组件的静态 HTML。

模拟 fetch 请求

在 React 组件中，我们通常会使用 fetch 或 axios 等工具来获取数据。为了避免实际发起请求，我们可以使用 Enzyme 提供的 mock 函数来模拟 fetch 请求。

下面是一个示例代码：

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

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

这是一个获取用户列表的组件，它会在组件挂载时发起 fetch 请求，并将返回的用户列表渲染到页面上。现在我们来看一下如何使用 Enzyme 模拟这个请求。

首先，我们需要安装 Enzyme：

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

然后，在测试文件中引入 Enzyme：

import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

接下来，我们可以使用 Enzyme 提供的 mock 函数来模拟 fetch 请求。具体做法是在测试文件中定义一个 mock 函数，并将它传递给 global.fetch：

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }])
  })
);

这个 mock 函数会返回一个 Promise，它的 json 方法会返回一个包含两个用户的数组。现在我们可以测试组件是否能够正确地渲染用户列表：

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

describe('UserList', () => {
  beforeEach(() => {
    global.fetch = jest.fn(() =>
      Promise.resolve({
        json: () => Promise.resolve([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }])
      })
    );
  });

  it('renders a list of users', async () => {
    const wrapper = shallow(<UserList />);
    await new Promise(resolve => setImmediate(resolve));
    expect(wrapper.find('li')).toHaveLength(2);
    expect(wrapper.find('li').at(0).text()).toEqual('Alice');
    expect(wrapper.find('li').at(1).text()).toEqual('Bob');
  });
});

在测试中，我们先定义了一个 beforeEach 函数，在每个测试之前都会执行。这个函数会定义一个 mock 函数，并将它传递给 global.fetch。然后，我们使用 Enzyme 的 shallow 函数来渲染组件，并等待 Promise 返回。最后，我们可以使用 Enzyme 的 find 函数来查找渲染出来的 li 元素，并测试它们的文本内容是否正确。

总结

Enzyme 是一个非常实用的 React 组件测试工具，它提供了一些方便的 API 来测试组件的行为和状态。在测试中，我们可以使用 Enzyme 的 mock 函数来模拟 fetch 请求，避免实际发起请求。希望本文能够帮助你更好地理解 Enzyme 的使用方法。

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