How can i conform nock with react-query?

[Michael-indochat]

I am trying to test a custom hook that uses react-query for data fetching in a React 18 project. The API call is mocked using nock, but I am facing issues: the result.current remains undefined, and the query stays in the loading state. I've already consulted the React Query testing documentation, but it hasn't been helpful for solving this problem.

my source code:

import { getUserProfileAPI } from "@/api/userProfile";
import { createQueryProviderWrapper } from "@/test/index";
import { useQuery } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import nock from "nock";

// Custom hook using react-query
const useGetUserProfileAPIQuery = () => {
  return useQuery(["tokenKey"], getUserProfileAPI); // getUserProfileAPI uses fetch('v1/me')
};

// Helper function to set up the hook
const setupHook = () => {
  return renderHook(() => useGetUserProfileAPIQuery(), {
    wrapper: createQueryProviderWrapper(),
  });
};

// Test suite
describe("useGetUserProfileAPIQuery", () => {
  test("should fetch user profile and have correct nickname", async () => {
    // Mocking the API response using nock
    nock("https://api.example.com")
      .get("/v1/me")
      .reply(200, {
        data: {
          id: 1,
          firstName: "/value from the api",
        },
      });

    // Setting up the hook
    const { result } = setupHook();

    // Trying to access result.current
    await waitFor(() => {
      console.log("result: => ", result.current.status); // Keeps returning isLoading
      console.log("result: => ", result.current.data); // Keeps returning undefined
    });
  });
});

Specific Issues

1. Why is result.current undefined?
2. Why does the query status remain in loading state?
3. Am I missing something in the setup?
4. Any guidance would be highly appreciated!

[TkDodo]

I'd say because that's not how waitFor works. It needs to return a Promise or throw an error, as per their documentation:

When in need to wait for any period of time you can use waitFor, to wait for your expectations to pass. Returning a falsy condition is not sufficient to trigger a retry, the callback must throw an error in order to retry the condition.

I also have a working version here:

• https://github.com/TkDodo/testing-react-query/blob/20e35ed4180cca6a6942b6984cfd57474c4be3d7/src/tests/hooks.test.tsx#L9-L16

    test('successful query hook', async () => {
        const { result } = renderHook(() => useRepoData(), {
            wrapper: createWrapper()
        })

        await waitFor(() => expect(result.current.isSuccess).toBe(true))

        expect(result.current.data?.name).toBe('mocked-react-query')
    })

[Michael-indochat]

@TkDodo

I have successfully implemented msw,
I'm implementing a version of nock and I want to evaluate which method works for me

I made adjustments based on your reply, but the results I printed out are still not as expected.
I hope you can help me find how to use nock with react-query, or provide me with a sample of nock with react-query.

source code:

import { createQueryProviderWrapper } from "@/test/index";
import { useQuery } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import nock from "nock";

const fetchUserProfile = async (tokenKey: string) => {
  const response = await fetch("http://api.example.com/v1/me", {
    headers: {
      Authorization: `Bearer ${tokenKey}`,
    },
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
};

const useGetUserProfileAPIQuery = (tokenKey: string) => {
  return useQuery(["userProfile", tokenKey], () => fetchUserProfile(tokenKey));
};

describe("useGetUserProfileAPIQuery", () => {
  test("should fetch user profile and have correct nickname", async () => {
    nock("http://api.example.com").get("/v1/me").reply(200, {
      id: 1,
      firstName: "/value from the api",
    });

    const tokenKey = "sampleTokenKey";
    const { result } = renderHook(() => useGetUserProfileAPIQuery(tokenKey), {
      wrapper: createQueryProviderWrapper(),
    });

    await waitFor(() => expect(result.current.isSuccess).toBe(true), {
      timeout: 5000,
    }); // fail

    expect(result.current.data).toBeDefined(); // fail
    expect(result.current.data?.id).toBe(1); // fail
  });
});

[Michael-indochat]

@TkDodo This is an example of my blood being good. I hope you can help me find out where is causing the nock return error. Thank you.

sandbox: https://codesandbox.io/p/sandbox/bold-moser-7vky6z?file=%2Fvite.config.ts%3A11%2C21

[TkDodo]

for all I know, this should work, but it doesn't. However, it starts to work when I replace the network request with a normal Promise.resolve:

https://codesandbox.io/p/sandbox/beautiful-curran-234q8n

So I don't think there's anything wrong with react-query per se. If I then replace react-query with a hook that just calls fetch in a useEffect, it also fails with nock:

https://codesandbox.io/p/sandbox/recursing-cdn-4zxtgm

The error is:

getaddrinfo ENOTFOUND api.example.com

so clearly, something with how nock is setup is not working. Knowing that, please consult the nock project. I've never used it and I don't know how it works.

[Michael0520]

@TkDodo

I initially chose to use nock for my examples because I saw it being used in the official documentation. However, I've encountered some errors. Could you please let me know if there's a complete repo available that demonstrates the correct way to use nock, as shown in the official examples?

doc link : https://tanstack.com/query/v4/docs/react/guides/testing#testing-network-calls

[TkDodo]

if you want to understand how nock works, please ask here:

https://github.com/nock/nock

I've given you a standalone example that doesn't use react-query, so its not react-query's problem.

If you're unhappy with the recommendation of nock, please open a PR to rewrite the docs to recommend msw. That's what I'm using in my blog as well:
https://tkdodo.eu/blog/testing-react-query

Again, I've never used nock, so I can't comment on why this doesn't work.

[Michael0520]

@TkDodo

Thank you for your prompt response and advice. First, I'd like to apologize as English is not my first language, which might have led to some inaccuracies or misunderstandings in my previous questions.

I'm indeed a beginner with nock, and I'm very appreciative of the standalone example and additional resources you've provided. I will follow your advice and seek further guidance in the nock GitHub community.