如何使用react-test-library对异步数据加载的组件进行快照测试？

在使用 react-test-library 对异步数据加载的组件进行快照测试时，你需要确保在数据加载完成后再进行快照。以下是一个基本的步骤指南：

1. 安装依赖： 确保你已经安装了 @testing-library/react 和 @testing-library/jest-dom。 npm install --save-dev @testing-library/react @testing-library/jest-dom
2. 编写测试： 使用 render 函数渲染组件，并使用 waitFor 或 act 来等待异步操作完成。 import React from 'react'; import { render, screen, waitFor } from '@testing-library/react'; import MyComponent from './MyComponent'; test('renders MyComponent with async data', async () => { render(<MyComponent />); // 等待异步数据加载完成 await waitFor(() => expect(screen.getByText('Expected Data')).toBeInTheDocument()); // 进行快照测试 expect(screen.getByTestId('my-component')).toMatchSnapshot(); });
3. 模拟异步数据： 如果你的组件依赖于外部 API 或其他异步操作，你可能需要模拟这些数据。你可以使用 jest.mock 来模拟这些依赖。 import React from 'react'; import { render, screen, waitFor } from '@testing-library/react'; import MyComponent from './MyComponent'; import * as api from './api'; jest.mock('./api'); test('renders MyComponent with async data', async () => { api.fetchData.mockResolvedValue({ data: 'Expected Data' }); render(<My组件 />); // 等待异步数据加载完成 await waitFor(() => expect(screen.getByText('Expected Data')).toBeInTheDocument()); // 进行快照测试 expect(screen.getByTestId('my-component')).toMatchSnapshot(); });
4. 处理加载状态： 确保你的组件在数据加载过程中有一个加载状态，并且在测试中等待这个状态消失。

import React, { useState, useEffect } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders MyComponent with async data', async () => {
  render(<MyComponent />);

  // 等待加载状态消失
  await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument());

  // 等待数据加载完成
  await waitFor(() => expect(screen.getByText('Expected Data')).toBeInTheDocument());

  // 进行快照测试
  expect(screen.getByTestId('my-component')).toMatchSnapshot();
});