[Bug]: Unable to mock react-router-dom in a react project

[saravmajestic]

Version

System:
    OS: macOS 15.6.1
    CPU: (14) arm64 Apple M4 Max
    Memory: 3.81 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 143.0.7499.170
    Safari: 18.6
  npmPackages:
    @rstest/core: ^0.7.7 => 0.7.7

Details

I have a very basic react app with react-router-dom with path params. I am using useParams to get path params in component and just displaying it. I am unable to mock the react-router-dom module with right useParams return value

src/pages/Menu1.test.tsx (in reproduction repo) has 2 tests, first one trying to use react-router-dom mocked version, and it fails. 2nd test uses complete route structure and it passes. I have tried rs.doMock, rs.mock but still not working.

Same test works with jest

Any help would be appreciated.

Reproduce link

https://github.com/saravmajestic/rstest-react-router-dom-mock

Reproduce Steps

1. yarn install
2. yarn test
3. Will show 1 failed and 1 passed test.

Failed test tries to use mocked react-router-dom.

[9aoy]

Repo isn’t accessible at that URL — can you grant me access?

[saravmajestic]

My bad, @9aoy can you try now? made the repo as public

[9aoy]

useParams is a re-exported API from react-router. Rspack optimizes this re-export by resolving it directly from react-router, skipping react-router-dom. You will find that mocking react-router works.

+ rs.mock("react-router", () => {
- rs.mock("react-router-dom", () => {
  return {
    ...reactRouterActual,
    useParams: rs.fn(() => ({ group: "my_group", id: "my_mock_group_id" })),
  };
});

For now, you can disable this optimization by setting optimization.providedExports to false. We’ll evaluate whether this optimization should be disabled by default in rstest.

export default defineConfig({
  tools: {
    rspack: {
      optimization: {
        providedExports: false,
      }
    }
  }
});

For now, you can disable this optimization by setting optimization.providedExports to false. We’ll also evaluate whether this optimization should be disabled by default in rstest.

[saravmajestic]

Thanks @9aoy for quick response. This works as expected. I will continue my migration!

[msimmer]

@9aoy I seem to have a similar issue with react-router v7 where I'm unable to mock the package.

The following test fails

import { describe, expect, it, rs } from "@rstest/core";
import { fireEvent, render } from "@testing-library/react";
import MyComponent from "./MyComponent";

import * as reactRouterActual from "react-router" with {
  rstest: "importActual",
};

const mocks = rs.hoisted(() => {
  return {
    mockUseParams: rs.fn().mockReturnValue({ id: "mocked value" }),
    mockNavigate: rs.fn(),
  };
});

rs.mock("react-router", () => ({
  ...reactRouterActual,
  useParams: mocks.mockUseParams,
  useNavigate: () => mocks.mockNavigate,
}));

describe("MyComponent", () => {
  it("navigates on click", () => {
    const { getByRole } = render(
      <reactRouterActual.MemoryRouter>
        <reactRouterActual.Routes>
          <reactRouterActual.Route path="*" element={<MyComponent />} />
        </reactRouterActual.Routes>
      </reactRouterActual.MemoryRouter>
    );

    const button = getByRole("button");

    const clickEvent = new MouseEvent("click", {
      bubbles: true,
      cancelable: true,
    });

    fireEvent(button, clickEvent);
    expect(mocks.mockNavigate).toHaveBeenCalled();
  });
});

But setting the providedExports option to false also allows this test to pass in this case.

Here's a repro

https://github.com/msimmer/rstest-809

[9aoy]

Disabling providedExports may cause errors related to runtime circular dependencies, so it cannot be directly disabled in rstest at present. This issue has been added to the FAQ, and we will investigate how to avoid this problem in mock later.

[msimmer]

Mocking react-router directly will work as expected

@9aoy I just wanted to point out that in my case, I'm using react-router v7, and am trying to mock react-router and not react-router-dom when running into this issue.