React-query 如何在 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。我的本地服务器的终端窗口记录了我在使用时 ping 服务器，sanityCall()但当我注释掉该调用并依赖挂钩时保持沉默。有谁知道如何测试这样的自定义挂钩？

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);
});