如何使用msw的react-query和react-testing-library来测试组件？

基础概念

MSW (Mock Service Worker) 是一个用于拦截和模拟 HTTP 请求的库，非常适合在开发和测试环境中使用。它可以让你在不修改实际后端代码的情况下，模拟各种 API 响应。

React Query 是一个强大的 React 状态管理库，专门用于处理异步数据获取。它提供了许多有用的功能，如自动缓存、轮询、分页等。

React Testing Library 是一个用于测试 React 组件的库，它鼓励编写用户行为驱动的测试，而不是关注组件的内部实现细节。

类型与应用场景

类型: 这三者结合使用主要应用于前端开发的单元测试和集成测试场景。
应用场景: 当你需要测试一个依赖于外部 API 的 React 组件时，可以使用 MSW 来模拟这些 API 请求，使用 React Query 来管理数据状态，最后使用 React Testing Library 来编写和执行测试。

示例代码

以下是一个简单的示例，展示如何使用 MSW、React Query 和 React Testing Library 来测试一个组件。

安装依赖

首先，确保你已经安装了必要的依赖：

npm install msw @testing-library/react @testing-library/jest-dom react-query

创建模拟 API

创建一个 mockServiceWorker.js 文件来定义你的模拟 API 响应：

// mockServiceWorker.js
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/data', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ data: 'mocked response' })
    );
  }),
];

设置测试环境

在你的测试文件中设置 MSW 和 React Query：

// MyComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { mswDecorator } from './mockServiceWorker';
import MyComponent from './MyComponent';

const queryClient = new QueryClient();

@mswDecorator
test('renders data from API', async () => {
  render(
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );

  const linkElement = await screen.findByText(/mocked response/i);
  expect(linkElement).toBeInTheDocument();
});

组件示例

以下是一个简单的 React 组件示例，它使用 React Query 来获取数据：

// MyComponent.js
import React from 'react';
import { useQuery } from 'react-query';

function fetchData() {
  return fetch('/api/data').then((res) => res.json());
}

function MyComponent() {
  const { data, isLoading } = useQuery('data', fetchData);

  if (isLoading) return <div>Loading...</div>;

  return <div>{data.data}</div>;
}

export default MyComponent;