将反应查询测试与测试库集成 [英] Integrate testing for react-query with testing-library
本文介绍了将反应查询测试与测试库集成的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
目标
我正在构建一个NextJS应用程序,它使用Reaction-Query来获取数据。
我现在正在尝试实现一个测试框架。然而,当我运行yarn test
时,我得到以下错误。从Reaction-Query文档中,我了解到错误通常与<QueryClientProvider>
未包括在_app.js
中的情况有关。
我怀疑我需要为index.test.js
中的Reaction-Query引入一些‘模拟数据’,但尚未找到有关如何执行此操作的文档。
错误
No QueryClient set, use QueryClientProvider to set one
代码
/tests/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();
});
});
/ages/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>
);
}
/ages/_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>
);
}
推荐答案
如错误所示,您还需要将测试中挂载的组件包装在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();
});
});
我将为每个测试创建一个新的提供程序以使它们保持隔离。
这篇关于将反应查询测试与测试库集成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文