[Bug]: Using data router with loader in jsdom environment causes exception in createClientSideRequest

[jonasrenault]

What version of React Router are you using?

6.8.2

Steps to Reproduce

Test Case : https://stackblitz.com/edit/github-mvvyq5?file=src/app.test.tsx

---

Create a project with vite and react-router-dom. Add testing dependencies vitest jsdom @testing-library/jest-dom @testing-library/react
Configure vitest in vite.config.ts :

  test: {
    globals: true,
    environment: "jsdom",
  },

Add test file using createMemoryRouter with a route that uses a loader, i.e.

import { test, expect } from "vitest";
import { RouterProvider, createMemoryRouter } from "react-router-dom";
import * as React from "react";
import { render, waitFor, screen } from "@testing-library/react";
import "@testing-library/jest-dom";

test("event route", async () => {
  const FAKE_EVENT = { name: "test event" };
  const routes = [
    {
      path: "/events/:id",
      element: <h1>Render this</h1>,
      loader: () => FAKE_EVENT,
    },
  ];

  const router = createMemoryRouter(routes, {
    initialEntries: ["/", "/events/123"],
    initialIndex: 1,
  });

  render(<RouterProvider router={router} />);

  await waitFor(() => screen.getByRole("heading"));
  expect(screen.getByRole("heading")).toHaveTextContent(/Render this/i);
});

Run test.

Expected Behavior

Test should work properly.

Actual Behavior

Error output from the test :

TypeError: The "emitter" argument must be an instance of EventEmitter or EventTarget. Received an instance of AbortSignal
 ❯ new NodeError node:internal/errors:399:5
 ❯ getEventListeners node:events:913:9
 ❯ new Request node:internal/deps/undici/undici:7132:17
 ❯ createClientSideRequest node_modules/@remix-run/router/router.ts:3284:10
 ❯ startNavigation node_modules/@remix-run/router/router.ts:1161:19
 ❯ Object.initialize node_modules/@remix-run/router/router.ts:842:7
 ❯ Proxy.createMemoryRouter node_modules/react-router/index.ts:224:6
 ❯ src/App.test.tsx:17:18
     15|   ];
     16| 
     17|   const router = createMemoryRouter(routes, {
       |                  ^
     18|     initialEntries: ["/", "/events/123"],
     19|     initialIndex: 1,
 ❯ node_modules/@vitest/runner/dist/index.js:131:13
 ❯ node_modules/@vitest/runner/dist/index.js:40:26

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: {
  "code": "ERR_INVALID_ARG_TYPE",
}

Behavior is the same when using createBrowserRouter.

Removing loader attribute for the route removes the issue. Also switching to another test environment, such as happy-dom, fixes the issue.

[timdorr]

#10118 (comment)