Интегрируйте тестирование для response-query с тестовой библиотекой

Цель

Я создаю приложение NextJS, которое использует ответный запрос для извлечения данных.

Сейчас я пытаюсь реализовать фреймворк для тестирования. Однако когда я запускаю yarn test, я получаю сообщение об ошибке ниже. Из документации по запросам на реакцию я понимаю, что ошибка обычно связана с обстоятельствами, когда <QueryClientProvider> не был включен в _app.js.

Я подозреваю, что мне нужно ввести некоторые «фиктивные данные» для ответа-запроса в index.test.js, но я не смог найти документацию о том, как это сделать.

Ошибка

No QueryClient set, use QueryClientProvider to set one

Код

/ тесты /index.test.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/index.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>
    );
}

/pages/_app.js

import { QueryClient, QueryClientProvider } from 'react-query';
import { Hydrate } from 'react-query/hydration';

import Layout from '../components/Layout';
import AuthContextProvider from '../context/AuthContext';
import { GlobalStyles } from '../styles';

import 'antd/dist/antd.css';
import 'react-quill/dist/quill.snow.css';

const queryClient = new QueryClient();

export default function MyApp({ Component, pageProps }) {
    return (
        <AuthContextProvider>
            <QueryClientProvider client={queryClient}>
                <Hydrate state={pageProps.dehydratedState}>
                    <GlobalStyles />
                    <Layout>
                        <Component {...pageProps} />
                    </Layout>
                </Hydrate>
            </QueryClientProvider>
        </AuthContextProvider>
    );
}

reactjs next.js react-testing-library react-query
person Darcy    schedule 13.01.2021    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Как следует из ошибки, вам также необходимо обернуть компонент, который вы монтируете в своем тесте, в 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();
    });
});

Я бы создал нового провайдера для каждого теста, чтобы держать их изолированными.

person TkDodo    schedule 13.01.2021