Constructing a Request for a relative URL fails

[micha149]

Describe the bug

I'm using vitest with happy-dom. In my application code I want to instanciate a Request from a relative URL like new Request('/api/foo'). From my perspective this should work and in my browser all works fine as expected. But creating the instance im my tests fails with:

TypeError: Invalid URL
 ❯ new URL node_modules/happy-dom/src/url/URL.ts:8:15
 ❯ Module.get src/data/api/common.ts:59:21
 ❯ src/data/api/common.test.ts:35:30

I digged a bit into the problem but can't really figure out whats going wrong. Something I noticed is that there is the Request constructor from node:internal instead of happy-dom when I print a stack trace from the URL constructor:

at new URL (file:///*******/node_modules/happy-dom/lib/url/URL.js:9:22)
at new _Request (node:internal/deps/undici/undici:5055:25)
at Module.get (/*******/src/data/api/common.ts:59:21)
at /*******/src/data/api/common.test.ts:35:30
at file:///*******/node_modules/@vitest/runner/dist/index.js:135:14
at file:///*******/node_modules/@vitest/runner/dist/index.js:58:26
at runTest (file:///*******/node_modules/@vitest/runner/dist/index.js:663:17)
at runSuite (file:///*******/node_modules/@vitest/runner/dist/index.js:782:15)
at runSuite (file:///*******/node_modules/@vitest/runner/dist/index.js:782:15)
at runSuite (file:///*******/node_modules/@vitest/runner/dist/index.js:782:15)

Switching to jsdom does not solve the issue. As well as creating a standalone script which uses happy-dom to create a Request works fine. So I think the problem lies in the integration into vitest.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-8gdvjz?file=test%2Frequest.test.ts

System Info

System:
    OS: macOS 13.6.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 14.14 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.1.0 - /opt/homebrew/bin/npm
    pnpm: 8.10.0 - /opt/homebrew/bin/pnpm
    bun: 1.0.7 - /opt/homebrew/bin/bun
    Watchman: 2023.10.23.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 118.1.59.124
    Chrome: 116.0.5845.179
    Edge: 116.0.1938.69
    Safari: 17.1
  npmPackages:
    @vitejs/plugin-react-swc: 3.4.0 => 3.4.0
    vite: 4.5.0 => 4.5.0
    vitest: 0.34.6 => 0.34.6

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitest-dev-vitest-8gdvjz (Open reproduction)

[sheremet-va]

This is just how node works:

> node
new Request('/api/foo')
// TypeError: Invalid URL

[micha149]

Sure. But using a browser-like environment in my tests should behave as a browser, not like node?!

[sheremet-va]

You don't use any environment in your reproduction. If you are using any environment, then Vitest doesn't control what variables are exposed and how they work.

[micha149]

My bad. I updated the reproduction to represent more my setup. And btw using the following solves my current issue:

import { Request as HappyRequest } from 'happy-dom';

// @ts-expect-error This is only a temporary fix
global.Request = HappyRequest;

[newlukai]

Currently I try to migrate from the cra stack to vite and vitest. The app I build relies on the browser's behavior to preceed a relative URL since this makes the app independent from a certain URL.

In contrast to @micha149 I'm using jsdom. There one can provide an own ResourceLoader. So I wrote one which just adds some scheme and host to a given relative URL.

Unfortunately, it seems that vitest serializes and deserializes the custom resource loader when passing that option to jsdom:

export default defineConfig({
    plugins: [
        react(),
        svgr()
    ],
    test: {
        setupFiles: ["src/setupTests.ts"],
        globals: true,
        environment: "jsdom",
        environmentOptions: {
            jsdom: {
                resources: new CustomResourceLoader()
            }
        }
    }
});

The next approach I try to follow is to create a custom environment.

[sheremet-va]

I fixed the issue with happy-dom, but jsdom doesn't support Request/Response, so I would recommend refactoring your code to something like this to support all environments:

new Request(new URL('/api/foo', import.meta.url))