Help Needed: Relative URLs in Jest Environment with MSW and jest-fixed-jsdom

[koen-dev]

Hi everyone,

I’m migrating to ky in my project and facing an issue while testing in a Jest environment. In the browser, everything works perfectly fine with relative URLs, but my tests fail with the following error:

TypeError: Failed to parse URL from /wilbur/api/airside/ramp-occupancy/A46
    at new Request (node:internal/deps/undici/undici:6110:19)
    ...

Setup:

• ky: For making HTTP requests.
• jest: For running the tests.
• msw: For mocking API responses.
• jest-fixed-jsdom: To simulate a browser-like environment in tests.

Problem:

Relative URLs (e.g., /example/api) work fine in the browser but fail in the Jest environment. I understand that this might be because Node.js (or jsdom) lacks a document.baseURI, which the browser naturally provides for resolving relative URLs. The thing is that once I replace ky with fetch the problem goes away.

Any help, advice, or best practices would be greatly appreciated! 😊

[koen-dev]

I have fixed this by providing the following prefixUrl:

export const apiClient = ky.extend({
    ...otherOptions,
    prefixUrl: location.origin,
});

This does mean you have to remove the / in input.

[sholladay]

Interesting that it works with fetch. I suspect this is happening because of how jsdom implements Request, which we use before passing the input on to fetch. Can you try replacing fetch() with new Request() and see if that triggers the error you have been seeing?

If it does, then it means jsdom is not properly implementing Request, because it's supposed to use the base URL / location.origin if available.

As an aside, I would strongly recommend using Playwright instead of jsdom. It's a much more realistic test environment and still very fast and easy to set up.