Jest测试React Hooks的useEffect

useEffect 是 React Hooks 中的一个关键功能，它允许我们在函数组件中处理副作用，如数据获取、订阅或手动更改 DOM

以下是使用 Jest 和 React Testing Library 测试使用 useEffect 的 React 函数组件的示例：

1. 首先，创建一个名为 MyComponent.js 的文件，其中包含使用 useEffect 的简单组件：

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

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

  useEffect(() => {
    fetch('/api/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data ? <div>Data: {JSON.stringify(data)}</div> : <div>Loading...</div>}
    </div>
  );
};

export default MyComponent;

2. 然后，创建一个名为 MyComponent.test.js 的测试文件：

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

// Mock the fetch function
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ id: 1, title: 'Test Data' }),
  })
);

describe('MyComponent', () => {
  it('fetches and displays data on mount', async () => {
    render(<MyComponent />);

    // Expect to see the loading message
    expect(screen.getByText('Loading...')).toBeInTheDocument();

    // Wait for the data to be fetched and displayed
    await waitFor(() => screen.getByText(/Data:/i));

    // Expect to see the fetched data
    expect(screen.getByText(/Data:.*"id": 1/)).toBeInTheDocument();
    expect(screen.getByText(/Data:.*"title": "Test Data"/)).toBeInTheDocument();
  });
});

在这个例子中，我们使用了 Jest 的 jest.fn() 方法来模拟 fetch 函数。我们还使用了 @testing-library/react 的 render、screen 和 waitFor 函数来渲染组件并等待异步操作完成。最后，我们使用 expect 和 toBeInTheDocument 断言来验证组件的行为。

要运行此测试，请确保已安装所需的依赖项（如 jest、@testing-library/react 和 @testing-library/user-event），并在项目根目录中运行 npm test 或 yarn test。