importActual not working in browserMode

[kenelliott]

Hello,
First I'd like to say thank you for the hard work on browserMode. I know it is in its early stages so I assumed I'd run into some hurdles. My team has been wanting this ability for some time. I wanted to create a stackblitz of the problem, but it is blocked by my corporate proxy.

My issue is specifically with mocking react-router-dom. It works in non-browser mode but not in browser mode.

First my test looks like this

// TestComponent.test.tsx
import { TestComponent } from './TestComponent';

vi.mock("react-router-dom", async () => {
  const actual = await vi.importActual("react-router-dom");
  return {
    ...actual,
    useParams: vi.fn().mockReturnValue({
      testParam: "abc"
    })
  };
});

it("works on my machine", () => {
  renderWithMemoryRouter(<TestComponent />);

  expect(screen.getByText('i got param abc')).toBeInTheDocument();
})

The component looks like this

// TestComponent.tsx
import { useNavigate, useParams } from "react-router-dom";
export const TestComponent = () => {
  const { testParam } = useParams();
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/')}>I got param {testParam}</button>
  );
};

renderWithMemoryRouter implementation

export const renderWithMemoryRouter = (
  children,
  routes = []
) => {
  const options = { element: children, path: "/" };

  const router = createMemoryRouter([{ ...options }, ...routes], {
    initialEntries: [options.path],
    initialIndex: 1
  });

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

Pass
vitest

Fail
vitest --browser.enabled=true --browser.name=chromium --browser.provider=playwright
SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=76d0ae7e' does not provide an export named 'useNavigate'

Thanks for looking at this, I'm interested if it is my fault or not.

Edit added package versions

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.25.1"
    "@testing-library/dom": "^10.1.0",
    "@testing-library/jest-dom": "^6.4.3",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.1",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitest/browser": "^2.0.4",
    "@vitest/coverage-v8": "^2.0.3",
    "@vitest/ui": "^2.0.3",
    "vite": "^5.0.8",
    "vitest": "^2.0.3"

[sheremet-va]

react-router-dom actually returns { default } object - you need to spread { ...actual.default, useParams }

[kenelliott]

Thanks for the quick reply. I tried that approach and got no change in either environment. I'm surprised it works either way honesly in vitest without browser mode.

[sheremet-va]

Does vi.importActual return anything at all?

[kenelliott]

in browser mode I get no console output including the one above the mock.

console.log("test console log");
vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual("react-router-dom");

  console.log("actual", actual);
  //...
});

and if I comment out the mock code I see the test console log.

but in not browser mode I see the output of the react-router-dom component from the console.log('actual', actual);

[sheremet-va]

This should fix it: #6219