用TypeScript在react-testing-library act()中使用Jest Fake计时器

npm install --save-dev @types/jest @types/react @testing-library/react

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

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

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

    fetchData();
  }, []);

  return (
    <div>{data ? data.message : 'Loading...'}</div>
  );
};

export default MyComponent;

import React from 'react';
import { render, act } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.useRealTimers();
  });

  it('should render "Loading..." initially', () => {
    const { getByText } = render(<MyComponent />);
    expect(getByText('Loading...')).toBeInTheDocument();
  });

  it('should render fetched data after async operation', async () => {
    const mockData = { message: 'Hello, World!' };
    jest.spyOn(global, 'fetch').mockResolvedValue({
      json: jest.fn().mockResolvedValue(mockData),
    });

    const { getByText } = render(<MyComponent />);

    // 使用act()触发异步操作
    await act(async () => {
      jest.runAllTimers();
    });

    expect(getByText(mockData.message)).toBeInTheDocument();
  });
});