[英]How to test components using react-query with msw and react-testing-library?
[英]React-Query - Unit Test with react-testing-library
我有一个Dashboard
组件,其中包含一个子组件,例如使用 react-query 的Child
。
我有一个Dashboard
组件的现有单元测试开始失败,错误是:
TypeError: queryClient.defaultQueryObserverOptions is not a function
38 | const { locale } = React.useContext(LocaleStateContext);
39 | const options = getOptions(locale);
> 40 | return useQuery(
| ^
41 | rqKey,
42 | async () => {
43 | const result = await window.fetch(url, options);
测试片段:
const queryClient = new QueryClient();
const { getByTestId, getByRole } = render(
<IntlProvider locale="en" messages={messages}>
<QueryClientProvider client={queryClient}>
<Dashboard />
</QueryClientProvider>
</IntlProvider>,
);
我阅读了有关测试的文档:
https://react-query.tanstack.com/guides/testing#our-first-test
但我不想一定要使用renderHook
因为我对结果不感兴趣。
编辑:
Child
组件使用的是 function:
export function usePosts({ rqKey, url, extraConfig }: CallApiProps) {
const { locale } = React.useContext(LocaleStateContext);
const options = getOptions(locale);
return useQuery(
rqKey,
async () => {
const result = await window.fetch(url, options);
const data = await result.json();
return data;
},
extraConfig,
);
}
这就是所谓的:
const { data, error, isFetching, isError } = usePosts({
rqKey,
url,
extraConfig,
});
根据您的回答,我应该创建一个单独的 function :
async () => {
const result = await window.fetch(url, options);
const data = await result.json();
return data;
},
例如
export async function usePosts({ rqKey, url, extraConfig }: CallApiProps) {
const { locale } = React.useContext(LocaleStateContext);
const options = getOptions(locale);
return useQuery(
rqKey,
await getFoos(url, options),
extraConfig,
);
}
然后在测试中模拟它。
如果我这样做,我将如何访问: error, isFetching, isError
因为usePosts()
现在将返回一个Promise<QueryObserverResult<unknown, unknown>>
编辑2:
我尝试简化我的代码:
export async function useFetch({ queryKey }: any) {
const [_key, { url, options }] = queryKey;
const res = await window.fetch(url, options);
return await res.json();
}
然后用作:
const { isLoading, error, data, isError } = useQuery(
[rqKey, { url, options }],
useFetch,
extraConfig,
);
所有作品。
在Dashboard
测试中,我然后执行以下操作:
import * as useFetch from ".";
和
jest.spyOn(useFetch, "useFetch").mockResolvedValue(["asdf", "asdf"]);
和
render(
<IntlProvider locale="en" messages={messages}>
<QueryClientProvider client={queryClient}>
<Dashboard />
</QueryClientProvider>
</IntlProvider>,
);
然后返回:
TypeError: queryClient.defaultQueryObserverOptions is not a function
78 | const { locale } = React.useContext(LocaleStateContext);
79 | const options = getOptions(locale);
> 80 | const { isLoading, error, data, isError } = useQuery(
| ^
81 | [rqKey, { url, options }],
82 | useFetch,
83 | extraConfig,
您提到的文档页面解释了如何测试依赖于 React Query 的自定义钩子。 您是在使用基于 React Query 的自定义钩子,还是只想测试使用 useQuery(React Query 提供的钩子)的组件?
如果您只想测试使用 useQuery 的 Child ,您应该模拟您的“请求函数”(返回 Promises 的函数,用作 useQuery 的第二个arguments ),并在没有任何提供程序的情况下渲染您的测试组件。
例如,在 Child 中说你有
const foo = useQuery('key', getFoos, { // additional config here });
// foo is a QueryResult object (https://react-query.tanstack.com/reference/useQuery)
// so your usePost function will return a QueryResult as well
// foo.data holds the query results (or undefined)
// you can access to foo.error, foo.isFetching, foo.status...
// also note that extra parameter to be passed to your async function
// should be part of the request key. Key should be an array :
// useQuery(['key', params], getFoos, { // additional config });
// so params object props will be passed as parameters for getFoos fucntion
// see https://react-query.tanstack.com/guides/query-keys#array-keys
...并且 getFoos 在path/to/file/defining/getFoos.ts
中定义为
const getFoos = async (): Promise<string[]> => await fetch(...);
...然后在 Child.test.tsx 你可以做
import * as FooModule from 'path/to/file/defining/getFoos';
// this line could be at the top of file or in a particular test()
jest.spyOn(FooModule, 'getFoos').mockResolvedValue(['mocked', 'foos']);
// now in your Child tests you'll always get ['mocked', 'foos']
// through useQuery (in foo.data), but you'll still have to use https://testing-library.com/docs/dom-testing-library/api-async/#waitfor (mocked but still async)
// No need for QueryClientProvider in this case, just render <Child />
回答:
尽管上面的答案帮助我朝着正确的方向前进,但根本问题是我使用 mockImplementation 提供上下文,然后使 QueryClientProvider 给出的上下文变得无用,例如
jest.spyOn(React, "useContext").mockImplementation(() => ({
...
}));
我最终删除了 mockImplementation 并在我的 UserStateContext.Provider 中添加了 QueryClientProvider 并解决了问题:
render(
<IntlProvider locale="en" messages={messages}>
<UserStateContext.Provider value={value}>
<QueryClientProvider client={queryClient}>
<Dashboard />
</QueryClientProvider>
</UserStateContext.Provider>
</IntlProvider>,
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.