Weird behaviour when using testing-library and react router.

[IagoLast]

I've created a codesandbox to illustrate my problem:

https://codesandbox.io/p/sandbox/xenodochial-dust-ccvsxr?file=%2Fsrc%2FApp.tsx%3A13%2C34

---

The codesandbox is just a vitest + typescript + react boilerplate to ilustrate the bug.

I have 2 pages:

• LoginPage
• DashboardPage

And a dummy "service" with a bunch of fake auth functions.

The login page redirects you to dashboard when user is authenticated and dashboard page redirects you to login when is not.

The code has a main browser router. The the code passes the tests if the router is declared inside the react App but does not work when the router is outside the react App

This code passes the tests:

export default function AppWorking() {
  const router_working = createBrowserRouter([
    {
      Component: () => <></>,
      path: "/",
      loader() {
        return redirect("/dashboard");
      },
    },
    {
      path: "/login",
      Component: LoginPage,
      loader() {
        if (authService.isAuthenticated()) {
          return redirect("/dashboard");
        }
        return null;
      },
    },
    {
      path: "/dashboard",
      Component: DashboardPage,
      loader() {
        if (!authService.isAuthenticated()) {
          return redirect("/login");
        }
        return null;
      },
    },
  ]);
  return <RouterProvider router={router_working} />;
}

This code won't

const router_not_working = createBrowserRouter([
  {
    Component: () => <></>,
    path: "/",
    loader() {
      return redirect("/dashboard");
    },
  },
  {
    path: "/login",
    Component: LoginPage,
    loader() {
      if (authService.isAuthenticated()) {
        return redirect("/dashboard");
      }
      return null;
    },
  },
  {
    path: "/dashboard",
    Component: DashboardPage,
    loader() {
      if (!authService.isAuthenticated()) {
        return redirect("/login");
      }
      return null;
    },
  },
]);

export default function AppNotWorking() {
  return <RouterProvider router={router_not_working} />;
}

Not sure if I'm missing something here, but this took me the whole morning because I got the router in it's own file :/

cc @kentcdodds @ryanflorence

[brophdawg11]

I'm not quite sure why it works for you in one case and not the other, but I know JSDOM doesn't support history methods out of the box on the global window, so if you want to test actual navigations you will need to provide a working window implementation to the router.

Here's how we do this for our jest unit tests with JSDOM: https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/__tests__/data-browser-router-test.tsx#L5450

So you likely need to restructure your code so you can pass a specific window instance in for test usage, and let it inherit the default window in browser/app usage.