Relative URL doesn't work with appHandler: "Invalid URL" error

[rorysaur]

The problem

It seems this commit about normalization of URLs may have broken the ability to use a relative-style url param with the app handler because calling new URL(url) on a path like "/my-url" throws Invalid URL error (as one would expect it to, since new URL() doesn't accept relative URLs).

    TypeError: Invalid URL

      at normalizeUrlForceTrailingSlashIfPathnameEmpty (node_modules/.pnpm/next-test-api-route-handler@4.
0.3_next@14.1.0/node_modules/next-test-api-route-handler/dist/src/index.js:337:16)

I was able to get around this easily by providing a dummy beginning of the url as the tests do (e.g. "ntarh://api/books" instead of just "/api/books"), but it doesn't match what the docs say, so it required some digging to figure this out.

I noticed the tests include a case with url: '/my-url' and pagesHandler, but not a case for the same url with appHandler. I believe that's the case that's broken.

Reproduction steps

1. Run a basic example like:

it("works", async () => {
  await testApiHandler({
    appHandler,
    url: "/my-url",
    async test({ fetch }) {
      const res = await fetch({
        method: "GET",
      })

      const json = await res.json()

      expect(json).toStrictEqual([])
    },
  })
})

[rorysaur]

Wow, lucky #1000! 🌟

[Xunnamius]

Hmm. The Pages Router doesn't use the URL class and so accepts those relative style urls, but the App Router seems to exclusively use the URL class, which explains that discrepancy. As you said, the URL class requires an absolute url, which is why that ntarh:// version works (it could also be https://).

I'll go over the documentation to make sure it's clearer. I haven't used the App Router in production yet, but it doesn't seem like the App Router itself supports relative urls (i.e. all urls seem to be some instance of the URL class and/or NextUrl). If this assumption isn't accurate, I'll have to address that as well :)

[rorysaur]

Ah! If it is unsupported, then a note in the docs to say something like, "to send query params, use literally any URL string with your query params at the end of it (ex: https://anything?foo=bar)" would have solved my use case. 👍🏻

[Xunnamius]

🎉 This issue has been resolved in version 4.0.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀