用参数模拟和测试onError
用参数模拟和测试onError
提问于 2021-04-14 11:21:27
我试图模拟useMutation，它有一个名为onError的参数。正如下面的代码所描述的那样，我正在使用它。
每当使用useRedirectOnErrorMutation时，都会将带有令牌的标头附加到请求中，因此，如果令牌无效，将出现401错误响应，我将在onError函数中捕获该响应，该响应随useMutation一起提供，并将用户重定向到登录页面。
export const useRedirectOnErrorMutation = <
TData = unknown,
TError = unknown,
TVariables = void,
TContext = unknown
>(
redirectionPath: string,
key: MutationKey,
mutationFunction: MutationFunction<TData, TVariables>,
options?: UseMutationOptions<TData, TError, TVariables, TContext>
): UseMutationResult<TData, TError, TVariables, TContext> => {
const router = useRouter();
console.log(useMutation);
return useMutation(key, mutationFunction, {
...options,
onError: (error) => {
if (error?.response.status == "401" || error?.response.status == "422") {
localStorage.removeItem("token");
localStorage.removeItem("userId");
router.push(redirectionPath);
}
},
});
};上面的代码工作得很好，现在我必须对这个功能进行100%的测试。
我目前对该功能的测试实现如下。
describe("(when api call gives error", () => {
it("should return the response", () => {
const push = jest.fn();
let onError: (
error: any,
variables: any,
context: any | undefined
) => Promise<void> | void;
// @ts-ignore
Router.useRouter = jest.fn(() => ({
push: push,
}));
const mockData = { email: "test@test.com", password: "test@1234" };
// @ts-ignore
ReactQuery.useMutation = jest.fn(
(
key: MutationKey,
mutationFunction: MutationFunction,
options: MutateOptions<
AxiosResponse<LoginResponse>,
AxiosError,
LoginValidationValues
>
) => {
console.log(options.onError.arguments);
onError = options.onError;
return {
mutate: jest.fn(() => mockData),
isLoading: false,
};
}
);
const { result, rerender } = renderHook(() =>
useRedirectOnErrorMutation("/auth/admin/login", "key", adminLoginAPI)
);
rerender();
act(() => {
onError({}, {}, {});
});
expect(result.current.mutate(mockData)).toEqual(mockData);
expect(push).toHaveBeenCalled();
});
});
});现在，这里测试的问题是，每次我运行它时，它仍然会显示未发现的onError部件，以及一条错误消息，说明error.response没有定义。我不知道如何在测试中通过onError参数。
那是(错误)
onError: (error) => {
if (error?.response.status == "401" || error?.response.status == "422") {
localStorage.removeItem("token");
localStorage.removeItem("userId");
router.push(redirectionPath);
}理想情况下，在由act包装的测试中传递错误对象应该是有效的，但它最终也会产生错误消息，onError不是函数。
act(()=>{
onError({response:{status: 401}},{},{})
})任何帮助都将不胜感激！我完全被困在这里了。
回答 2
Stack Overflow用户
发布于 2021-04-15 15:35:02
我真的不能给你一个具体的答案，也许只是给你一点建议：
- 需要100%的测试覆盖率背后的目的是什么？您要测试的函数有许多副作用，您必须模拟请求、localStorage、react路由器、onError、.剩下的基本上是更多的测试代码而不是实际的生产代码。您基本上是在测试react query是否调用了
onError方法，这是react-query内部测试的内容。不要测试第三方代码-测试自己的代码。像这样的东西用集成或端到端测试测试要好得多，柏树是一个很好的工具。 - 如果您想测试自定义钩子，我只会模拟queryFn的结果，而不是整个突变函数。诺克对此很有好处--在react查询-文档中甚至有一个如何做到这一点的例子。模拟服务型工人是在网络级别上模拟请求的一个很好的工具，我最近写了一篇文章，讨论如果您想要给它一个read 这里，就用模拟服务工作人员测试recently。它还链接到一个示例回购与工作测试。
Stack Overflow用户
发布于 2021-08-08 02:05:52
解决方案是在测试中创建查询客户端时关闭react重试，否则retries查询将等待下一次重试失败(默认值:3次)，并且可能会超时。https://github.com/tannerlinsley/react-query/discussions/2196#discussioncomment-659468
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67090742
复制相关文章
相似问题
腾讯云开发者
