Jest useNavigate may be used only in the context of a router

While working with Jest and React-Testing-Library, you might encounter the following error:

useNavigate() may be used only in the context of a <Router> component

There are two reasons for the above error:

  1. The React component you trying to render, is being rendered without wrapping it with any React-router component wrapper such as: BrowserRouter, HistoryRouter or MemoryRouter.
  2. React-Router-Dom hooks aren’t mocked.

Solution

1- Wrap your component with React-Router component (based on your usage, it can be one of (BrowserRouter, HistoryRouter or MemoryRouter), as the following:

describe("App", () => {
  it("renders correctly", async () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );
  });
});

2- Mock React-Router hooks as the following:

const mockedUsedNavigate = jest.fn();

jest.mock("react-router-dom", () => ({
  ...(jest.requireActual("react-router-dom") as any),
  useNavigate: () => mockedUsedNavigate
}));

describe("App", () => {
  it("renders", async () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
    );

    // expect(mockedUsedNavigate).toHaveBeenCalledWith('/post-1');
  });
});

More details about How to mock React-Router-Dom hooks in Jest can be found on this link.


Photo from Unsplash.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: