ReferenceError: Request is not defined when testing with React Router v6.4

Question

I am attempting to create unit tests using React Testing Library that click on React Router links to verify certain pages appear. I am using a very similar setup to the answer found here. When I run the test I get ReferenceError: Request is not defined. Since I am using a RouterProvider I can not follow the React Testing Library docs exactly.

I have my routes set up in a dedicated file:

export const routes: RouteObject[] = [{
    path: '/',
    element: <AppWrapper />,
    errorElement: <PageNotFoundScreen />,
    children: [{
        path: '/',
        element: <FeaturedSearchScreen />
    },{
        path: 'auth',
        element: <AuthScreen />,
        children: [{
            path: 'login',
            element: <LoginForm />
        },{
            path: 'signup',
            element: <SignUpForm />
        }]
        },{
            path: 'dashboard',
            element: <DashboardScreen />
        },{
            path: 'search',
            element: <SearchResultsScreen />,
            loader: searchLoader
        } 
    ]
}];

I then create a memory router in my test file

const router = createMemoryRouter(routes, {initialEntries: ['/']});
const user = userEvent.setup();
render(<RouterProvider router={router}/>);

I am using an Outlet in AppWrapper to render all of the children.

Expected

Tests pass

Results

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
ReferenceError: Request is not defined
 ❯ createRequest node_modules/@remix-run/router/router.ts:2654:3
 ❯ startNavigation node_modules/@remix-run/router/router.ts:886:19
 ❯ Object.navigate node_modules/@remix-run/router/router.ts:784:18
 ❯ push node_modules/react-router/lib/components.tsx:74:16
 ❯ navigate node_modules/react-router/lib/hooks.tsx:211:7
 ❯ internalOnClick node_modules/react-router-dom/index.tsx:727:9
 ❯ handleClick node_modules/react-router-dom/index.tsx:385:9
 ❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14
 ❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25

When I render the initial screen, I am able to verify all components, so I know my set up is generally working. It fails awaiting the new page header. Feel free to look at the entire code on this branch https://github.com/Thenlie/Streamability/tree/43-feat-test-suite

Answer 1

I solved it using 'jest-fetch-mock' (https://www.npmjs.com/package/jest-fetch-mock)

For TypeScript/ES6 add the following lines to the start of your test case (before any other imports) in the setupTests.ts file.

import { enableFetchMocks } from 'jest-fetch-mock'
enableFetchMocks();