I wanted to put this question out there because I'm having trouble creating a solution for writing tests (via Jest) and mocking API requests, for a NextJS-based app. Here is a diagram that shows how the app makes requests for data. We have custom hooks that wrap @tanstack/react-query hooks that help make requests to our backend. useServiceQuery invokes useQuery, whose queryFn is constructed through nextJS server actions. This was done to make queries faster as it utilizes the server to do small work like getting the configs for endpoints. Regardless, this is just to understand the context, as the actual network request for data is done on the nextJS server.

Here is where I'm having trouble understanding how to mock these functions. The easiest solution to get something in was to just mock the hooks to invoke these actions. This is its own challenge because these are useQuery/useMutation returns, so it's not ideal to create mocks because they have a state-machine associated with them (loading, pending, error, etc). It's been working easily for queries, but mutations are different because we can't just mock the return "once", we have to create a mock function for the mutate/mutateAsync functions as well.

I think I don't yet understand fully how I could utilize nock or msw as is suggested so much for mocking network requests, because network requests are done on the server in this case. So my question in the end is about how I could use jest (if at all) to mock these calls?

I wanted to put this question out there because I'm having trouble creating a solution for writing tests (via Jest) and mocking API requests, for a NextJS-based app. Here is a diagram that shows how the app makes requests for data. We have custom hooks that wrap @tanstack/react-query hooks that help make requests to our backend. useServiceQuery invokes useQuery, whose queryFn is constructed through nextJS server actions. This was done to make queries faster as it utilizes the server to do small work like getting the configs for endpoints. Regardless, this is just to understand the context, as the actual network request for data is done on the nextJS server.

Here is where I'm having trouble understanding how to mock these functions. The easiest solution to get something in was to just mock the hooks to invoke these actions. This is its own challenge because these are useQuery/useMutation returns, so it's not ideal to create mocks because they have a state-machine associated with them (loading, pending, error, etc). It's been working easily for queries, but mutations are different because we can't just mock the return "once", we have to create a mock function for the mutate/mutateAsync functions as well.

I think I don't yet understand fully how I could utilize nock or msw as is suggested so much for mocking network requests, because network requests are done on the server in this case. So my question in the end is about how I could use jest (if at all) to mock these calls?

• unit-testing
• next.js
• server
• jestjs

1 Answer 1

A really handy solution is mswjs it mocks directly http calls independently of library used and with mswjs/data you can directly have a DB-like behavior