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

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

// 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' })
    );
  }),
];

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

// 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;