反应查询如何从 Jest 测试中的自定义 useMutation 挂钩调用 mutate

Question

我是运行一个 React Native 项目，我正在其中测试用 react-query 编写的自定义挂钩。我正在使用 Jest、@testing-library/react-hooks 和 @testing-library/react-native。在我的测试中，我似乎找不到调用挂钩返回的 mutate 函数的方法。

下面是自定义挂钩：

    export default function useAuthentication() {
      const { mutate, data, isSuccess, isError } = useMutation(
        authenticationApi.authenticateUser
      );
      return { mutate, data, isSuccess, isError };
    }

根据 react-query 的文档，我正在使用 renderHook() 渲染钩子并等待突变调用的结果：

    const authBody: AuthBody = {
      username: '111111',
      password: '111111',
    };
    
    describe('Authentication Hook', () => {
      const sanityCall = () =>
        axios.post('http://localhost:4000/auth/authenticate');
      console.log(sanityCall());
    
      const queryClient = new QueryClient();
      it('Gets authentication data', async () => {
        const wrapper = ({ children }: any) => (
          <QueryClientProvider client={queryClient}>
            <Provider store={store}>
              <PersistGate loading={null} persistor={persistor}>
                {children}
              </PersistGate>
            </Provider>
          </QueryClientProvider>
        );
        const { result, waitFor } = renderHook(() => useAuthentication(), {
          wrapper,
        });
    
        await waitFor(() => {
          result.current.mutate({
            username: authBody.username,
            password: authBody.password,
          });
          return result.current.isSuccess;
        });
        expect(result.current.data).toEqual({ answer: 42 });
      });
    });

它没有调用 API。我本地服务器的终端 window 记录了我在使用 sanityCall() 时正在对服务器执行 ping 操作，但当我注释掉该调用并依赖挂钩时，它仍然保持沉默。有人对如何测试这样的自定义挂钩有任何想法吗？

Answer 1

将其包装在 Act 中并在那里调用 mutate 导致调用我的服务器：

const Wrapper = ({ children }: any) => (
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <NavigationContainer>{children}</NavigationContainer>
      </PersistGate>
    </Provider>
  </QueryClientProvider>
);

it("Gets authentication data", async () => {
  const { result } = renderHook(() => useAuthentication(), {
    wrapper: Wrapper,
  });
  act(() => {
    result.current.mutate({
      username: authBody.username,
      password: authBody.password,
    });
  });
  const token = store.getState().token;
  console.log("TOKEN:");
  console.log(token);
});

反应查询如何从 Jest 测试中的自定义 useMutation 挂钩调用 mutate

react-query how to call mutate from custom useMutation hook in Jest test

jestjs

react-native

react-hooks

react-native-testing-library

react-query