[Bug]: Navigate redirects seemingly aren't updating the location state in unit tests

[sonic1981]

What version of React Router are you using?

6.3.0

Steps to Reproduce

Given a react component:

export const App: React.FC<{router: any}> = ({router}) => {
  return (
    <div className="flex flex-col h-full">
    <div className="h-1/8 text-center border-brand-primary border-2">Nav bar with login goes here</div>
    <div className="h-1/8 text-center border-brand-primary border-2">Pathways overview data goes here</div>
    <div className="flex-auto">
      <RouterProvider router={router} fallbackElement={<PageNotFound />} />
    </div>
    <div className="mt-64">
      <SeroFooter/>
    </div>
  </div>
  );
}

and routes:

const routes = {
          path: "*",
          element: <Navigate to="/pathway/123" replace />
        };

When running using the createBrowserRouter hook, everything works as expect. Navigating to / redirects me to /pathway/123. I then tried the same thing in a unit test using createMemoryRouter but the path never updates:

test('root sends redirect', async () => {

        const router = createMemoryRouter(routes);
        render(<App router={router} />);

        await waitFor(() => {
          expect(router.state.location.pathname).toEqual('/pathway/123');
        }, {timeout: 5000});

      });

Expected Behavior

expect(router.state.location.pathname).toEqual('/pathway/123'); should return true in the unit test

Actual Behavior

router.state.location.pathname always returns \ and the test times out.

[brophdawg11]

I'm not able to reproduce the issue, could you provide a reproduction? The following test passes for me on 6.4.2:

    it("navigates", () => {
      let renderer: TestRenderer.ReactTestRenderer;
      let router = createMemoryRouter(
        [
          {
            path: "pathway/:id",
            element: <h1>Pathway</h1>,
          },
          {
            path: "*",
            element: <Navigate to="/pathway/123" replace />,
          },
        ],
        {
          initialEntries: ["/"],
        }
      );

      expect(router.state.location.pathname).toBe("/");

      TestRenderer.act(() => {
        renderer = TestRenderer.create(<RouterProvider router={router} />);
      });

      expect(router.state.location.pathname).toBe("/pathway/123");
      expect(renderer.toJSON()).toMatchInlineSnapshot(`
        <h1>
          Pathway
        </h1>
      `);
    });

[sonic1981]

Thanks, I'll have a look into this. It might be monday before I can confirm now.

[sonic1981]

If I cut and paste the above test into my project and run it I get an error:

/Users/liamhughes/Documents/GitHub/pathways/frontend/node_modules/@remix-run/router/router.ts:2654
return new Request(url, init);
^
ReferenceError: Request is not defined

am I missing something?

[brophdawg11]

Ah, yeah you will need to polyfill the fetch API for your tests since they run in node and not the browser. Potentially not an issue if you use node18+ since that has fetch but I haven't tested that.

Here's how we do it for our internal tests: https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/__tests__/setup.ts

[sonic1981]

Just FYI I'm using the latest LTS of node, so 18.12.0

[brophdawg11]

@sonic1981 Does the above polyfill approach work for you? If so can this issue be closed out?

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂