Need to pass query params

[RathodSanjayL]

Hello, I need to pass query parameters along with the URL to get API for pagination.

In the App Router API folder I have one API api/users?page=1&page_size=10.

how I can pass this page and page_size query params.

testApiHandler({
    appHandler,
    url,
    test: async ({ fetch }) => {
        const response = await fetch({
            method: "GET",
        });
        expect(response.status).toBe(res.status);
        if (res.match) {
            const json = await response.json();
            expect(json).toEqual(res.match);
        }
    },
});

I tried with this where I am passing URL like api/users?page=1&page_size=10

please help me how to get rid of this issue

[Xunnamius]

Hi @RathodSanjayL!

If you want access your query parameters, pass a proper relative url string to testApiHandler like so:

testApiHandler({
  appHandler: {
    async GET(request) {
      console.log(request.nextUrl);
      return Response.json(
        { queryString: request.nextUrl.search },
        { status: 200 }
      );
    }
  },
  // Note how the URL begins with a "/" and does not require a path
  url: '/?page=1&page_size=10', // <== These appear in request.nextUrl.searchParams
  test: async ({ fetch }) => {
    const res = await fetch({ method: 'GET' });

    await expect(res.json()).resolves.toStrictEqual({
      queryString: '?page=1&page_size=10'
    });
  }
});

[Xunnamius]

You can examine the cookies returned by your API handler using this example.

[RathodSanjayL]

@Xunnamius in my regular api's I am using import { cookies } from "next/headers";

I am having this error Invariant: cookies() expects to have requestAsyncStorage, none available.

await testApiHandler({
  appHandler,
  requestPatcher: async () => {
    // Generate access and refresh tokens for the user.
    const tokens = await createTokens('832e5c98-0354-4d8a-a115-96f428b24cae');

    // Set the access and refresh tokens in the response cookies.
    createCookies('accessToken', tokens.accessToken);
    createCookies('refreshToken', tokens.refreshToken);
  },
  url: '/?page=1&page_size=10',
  test: async ({ fetch }) => {
    const createCookies = (name: string, value: string) =>
      cookies().set({
        name,
        value,
        httpOnly: true,
        sameSite: 'strict',
        secure: true
      });
  }
});

I can not use cookies in test case file it's server side only.

[Xunnamius]

@RathodSanjayL Next.js's magical helper functions (like cookies()), which rely on AsyncLocalStorage for synchronization, only work within the appHandler context and not outside of it.

This bit of the NTARH documentation is relevant here:

...only functions invoked within appHandler have access to the storage context that allows Next.js's helper functions to work.

Aside: I'm considering breaking up the documentation into individual pieces to make things a bit easier to understand. Let me know if you have any other questions or any suggestions about NTARH :)

[Xunnamius]

(I edited your comment to properly format the code example and trigger GitHub's syntax highlighting)

Also, createCookies is being defined within the test function, but being referenced within requestPatcher. Even if Next.js's magic cookies() helper function did work how you wanted, createCookies would need to be hoisted one scope up:

// !!! This still won't work !!!
// !!! because cookies() can only be called inside an appHandler !!!
const createCookies = (name: string, value: string) =>
  // vvv Can't call this here!
  cookies().set({
    name,
    value,
    httpOnly: true,
    sameSite: 'strict',
    secure: true
  });

await testApiHandler({
  appHandler, // <== You can only call cookies() inside of here
  requestPatcher: async () => {
    // Generate access and refresh tokens for the user.
    const tokens = await createTokens('832e5c98-0354-4d8a-a115-96f428b24cae');

    // Set the access and refresh tokens in the response cookies.
    createCookies('accessToken', tokens.accessToken);
    createCookies('refreshToken', tokens.refreshToken);
  },
  url: '/?page=1&page_size=10', // <== This is good and correct
  test: async ({ fetch }) => fetch(),
  rejectOnHandlerError: true // <== Added this so NTARH rejects if fetch() throws an exception
});

Still, this code will not work because cookies() cannot be used in this way.

[Xunnamius]

If you want to manipulate cookies in NTARH outside of appHandler, here's an example I adapted from NTARH's unit tests. Keep in mind that my GET handler here is just an example, and you should replace it with your own.

import { cookies } from 'next/headers';

it('handles cookies', async () => {
  await testApiHandler({
    appHandler: {
      GET() {
        console.log(cookies().getAll());
        cookies().set('access_token', '1234');
        return Response.json({});
      }
    },
    test: async ({ fetch }) => {
      const res = await fetch({ headers: {
        cookie: 'mycookie=somevalue; myothercookie=something-else'
      }});
      expect(res.cookies[0]).toStrictEqual({ 'access_token': '1234' });
    }
  });
});

Note that I didn't actually run this code, so there may be a typo in there.

You can use a library (like the cookie npm package) to construct more advanced cookies to send via fetch headers.