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

在React应用中使用TypeScript，通过react-testing-library测试组件时，有时需要在异步操作中使用Jest Fake计时器。这样可以模拟异步行为，使测试更加可靠和准确。

首先，需要安装所需的依赖包。在项目根目录下执行以下命令：

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

接下来，创建一个包含异步操作的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;

然后，在测试文件中编写测试用例，使用TypeScript和react-testing-library来测试组件的行为。例如：

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();
  });
});

在上述测试用例中，我们使用了beforeEach和afterEach来启用和恢复Jest的Fake计时器。然后，我们使用jest.spyOn来模拟fetch函数的返回值，并使用act包装异步操作。最后，使用await等待异步操作完成，并进行断言验证。

总结： TypeScript是一种静态类型的JavaScript超集，它为React应用提供了更好的类型安全性。在使用react-testing-library进行组件测试时，通过在act()中使用Jest Fake计时器，可以更好地模拟异步行为，提高测试的准确性和可靠性。

推荐的腾讯云产品：