如何测试useEffect中异步函数的基本示例

要测试 useEffect 中的异步函数，可以使用 Jest 和 Enzyme 进行单元测试。

首先，安装 Jest 和 Enzyme：

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

接下来，配置 Jest 和 Enzyme。在项目的根目录中创建一个名为 setupTests.js 的文件，并添加以下代码：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

然后，在 package.json 文件中添加以下代码：

"jest": {
  "setupFilesAfterEnv": [
    "./setupTests.js"
  ]
}

现在，我们可以开始编写测试代码。假设我们的组件中有一个异步函数 fetchData，并且它在组件加载时触发。我们想要测试 useEffect 是否成功调用了这个异步函数。以下是一个示例组件的代码：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

现在，我们可以编写测试代码。在项目的根目录中创建一个名为 MyComponent.test.js 的文件，并添加以下代码：

import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  beforeEach(() => {
    jest.spyOn(window, 'fetch').mockImplementation(() => Promise.resolve({
      json: () => Promise.resolve([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }])
    }));
  });

  afterEach(() => {
    window.fetch.mockRestore();
  });

  it('should fetch data on component mount', () => {
    mount(<MyComponent />);
    expect(window.fetch).toHaveBeenCalledWith('https://api.example.com/data');
  });
});

在测试代码中，我们使用 jest.spyOn 来模拟 fetch 函数，并返回一个解析后的假数据。在 beforeEach 中，我们将这个模拟函数应用于全局的 window.fetch，以便在组件中调用 fetch 时将其替换为模拟函数。在 afterEach 中，我们还原 fetch 函数的原始实现。

最后，我们使用 mount 函数来渲染组件，并断言 fetch 函数是否被调用，并传递了正确的 URL。

现在，我们可以运行测试了。在终端中运行以下命令：

npm test

Jest 将运行测试，并输出结果。如果一切顺利，测试应该通过，并且在终端中会显示一个绿色的勾号表示测试通过。如果测试失败，Jest 将显示错误消息和堆栈跟踪。

这就是如何测试 useEffect 中异步函数的基本示例。你可以根据自己的需求进一步扩展测试代码，例如测试异步函数是否正确地更新组件的 state。