将react-query 测试与testing-library 集成

Question

目的

我正在构建一个使用 React-query 来获取数据的 NextJS 应用程序。

我现在正在尝试实现一个测试框架。但是，当我运行时yarn test，出现以下错误。从react-query文档中，我了解到错误通常与<QueryClientProvider>未包含在_app.js.

我怀疑我需要为反应查询引入一些“模拟数据”，index.test.js但无法找到有关如何执行此操作的文档。

错误

No QueryClient set, use QueryClientProvider to set one

代码

/测试/index.test.js

No QueryClient set, use QueryClientProvider to set one

/pages/index.js

import { render, screen } from '@testing-library/react';

import Home from '../pages/index';

describe('Home', () => {
    it('renders without crashing', () => {
        render(<Home />);

        expect(
            screen.getByRole('heading', { name: 'Welcome to Next.js!' })
        ).toBeInTheDocument();
    });
});

/pages/_app.js

import Link from 'next/link';
import { Button } from 'antd';
import { useQuery } from 'react-query';

import { readUserRole } from '../lib/auth';
import NewBriefButton from '../components/Buttons/NewBriefButton';
import NewJobButton from '../components/Buttons/NewJobButton';
import NewClientButton from '../components/Buttons/NewClientButton';

export default function Home() {
    const userRoleQuery = useQuery('userRole', readUserRole);

    const { status, data } = userRoleQuery;

    if (status === 'error') {
        return <p>error...</p>;
    }

    if (status === 'loading') {
        return <p>loading...</p>;
    }

    return (
        <div>
            <h1>Home page</h1>
            {data === 'Manager' && (
                <>
                    <Button type='primary'>
                        <Link href='/assets/upload'>Upload Assets</Link>
                    </Button>
                    <NewBriefButton />
                    <NewJobButton />
                    <NewClientButton />
                </>
            )}
        </div>
    );
}

Answer 1

正如错误所示，您还需要将在测试中安装的组件包装在 QueryClientProvider 中：

describe('Home', () => {
    const queryClient = new QueryClient();
    it('renders without crashing', () => {
        render(
            <QueryClientProvider client={queryClient}>
                <Home />
            </QueryClientProvider>
        );

        expect(
            screen.getByRole('heading', { name: 'Welcome to Next.js!' })
        ).toBeInTheDocument();
    });
});

我会为每个测试创建一个新的提供者以保持它们的隔离。