"Request" is not defined

[bbougon]

Hello,

I moved to vite to build my React app and so on moved to vitest. I have now to make my tests run but I'm facing some issues when mocking fetch with msw.

I don't think it's an issue, I guess it's a misusage from me.
Vitest is configured as followed:

test: {
        environment: "jsdom",
        globals: true,
        setupFiles: './setupTests.js',
        env: "test"
    }

When I run my test (I'm running them against node@16 and FYI, I've tested it with node@18 but I have other errors), it ends with:
ReferenceError: Request is not defined

One of my tests:

it('should display the error', async () => {
            server.resetHandlers(
                new RequestHandlerBuilders()
                    .get("/sessions")
                    .unprocessableEntity()
                    .body(new APIErrorBody()
                        .dummyDetail()
                        .build())
                    .build(),
                emptyClients
            )

            render(<Calendar date={new Date("2021-10-10T11:20:00")}/>)

            expect(await screen.findByText("An error occurred (see message below):", {selector: 'h5'})).toBeInTheDocument()
            expect(await screen.findByText("an error message", {selector: 'p'})).toBeInTheDocument()
            expect(await screen.findByText("an error type", {selector: 'p'})).toBeInTheDocument()
        })

The failing line:

const request = new Request(API_URI + endpoint, config);
const response = await fetch(request)

When I run tests either with happy-dom, it uses fetch from happy-dom which relies on string and not on URL obect.

I've tried to update to node@18 reading this discussion but it fails with Error: connect ECONNREFUSED ::1:80

[dermoumi]

Neither fetch, Request, or Response (among others) are available in Node@16. And it's generally a bad idea to have network bound operations in unit tests.

You probably want to polyfill them, or even mock them.

You might want to try the package cross-fetch which defines Request and Response in addition to fetch. You can add it to your setupTests.js like this:

import { Request, Response, fetch } from "cross-fetch";

vi.stubGlobal("Response", Response);
vi.stubGlobal("Request", Request);
vi.stubGlobal("fetch", fetch);  // Ideally you'd want to mock this with a function that returns the expected result, for each test.

[dermoumi]

Just want to note that these objects from cross-fetch don't necessarily match the typings from Node or Browsers.

You might have errors where the Request object does not implement some field with a specific typing that some library expects.

If ever that happens you can try some other alternatives to cross-fetch, mock-in the required fields or if it's a typing issue, attempt to override the typings in your globals.d.ts...

[bbougon]

Hello,

Thanks dermouni.
I'm mocking the request by using msw (here) as I am used to and as it is advised in vitest (and React testing Library too).

The thing, in React, is that you have to run your tests against jsdom or happy-dom therefore you depend on the fetch implementation delivered with it.

I'll try the cross-fetch solution.

[sheremet-va]

jsdom doesn't provide fetch implementation. happy-dom just imports cross-fetch

[bbougon]

Finally I got it working and it was an error that didn't appear under jest:

• Works with jest (not with vitest):

  rest.get(this.path)
  ...
  

• Works with vitest:

  rest.get(API_URI + this.path)
  ...
  

Where API_URI stands for http://localhost

[belgattitude]

Makes sense. Out of curiosity, did your jest.config have a testUrl (jest 27) or testEnvironmentOptions.url set to localhost ?

Link: https://jestjs.io/docs/upgrading-to-jest28#testurl