Mock Router in React testing library and jest

Question

I'm writing unit test with React testing library and Jest and wants to check if my React Component is successfully able to navigate to next Page.

import { fireEvent, render, screen } from "@testing-library/react";
import React from 'react';
import { Provider } from 'react-redux';
import '@testing-library/jest-dom';
import appStore from '../../src/app/redux/store';
import { MemoryRouter, Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';

const setup = (initialEntries = []) => {
      let inMemHistory = createMemoryHistory({ initialEntries });
      const utils = render(
        <Router history={inMemHistory}>
          <Provider store={appStore}>
            <Component-1 />
          
          </Provider>
        </Router>
      );
 
      const saveButtonElem = screen.getByRole('button', { name: "Save and Continue" });
      return {
            saveButtonElem,
            inMemHistory,
            ...utils,
      }
};

Test:

test('should be able to navigate', async () => {
            const {
                 saveButtonElem,
                  inMemHistory,
                  getByText,
                  queryByText,
                  queryAllByText,
            } = setup(["/component_add"]);

        // Content of Test

            // Saving Config
            fireEvent.click(saveButtonElem);
            console.info("Current Path", inMemHistory.location.pathname);
// Got /component_add on console
// Expected /component_data  after clicking on save button
   
      })

I've tried waiting for 5 second after clicking save button and then tried to print path, but results are same.

Are you using React Router (see https://stackoverflow.com/q/65270992/3001761) or similar? _How_ does your component navigate? Give a [mre]. — jonrsharpe, Aug 07 '21 at 12:34
People who try to help usually need more explicit details. I have answered based on my understanding of your question. Hope it helps. — Karthik R, Aug 07 '21 at 13:41
I've edited the question and added more details to it, see you need more details, I've implemented Option-2 suggested by @KarthikR — Booster, Aug 07 '21 at 17:19

Karthik R · Answer 1 · 2021-08-08T01:12:42.780

Assuming you use react-router, You can use the Memory router for the testing which is easier and performant. I might have typos or syntax errors as I type without IDE support. But it should help you with idea on what I propose.

Option 1:

it("should route to the expected page", () => {
  let mockHistory, mockLocation;
  render(
    <MemoryRouter initialEntries={["/currentUri"]}>
      <Component1 />
      // Dummy route that routes for all urls
      <Route
        path="*"
        render={({ history, location }) => {
          mockHistory= history;
          mockLocation= location;
          return null;
        }}
      />
    </MemoryRouter>
  );
  // navigate here on event
  userEvent.click(screen.getByRole('button', {name: /Save/}));
  expect(mockLocation.pathname).toBe("/expectedUri");
});

Option 2:

import { createMemoryHistory } from 'history';
import { Router } from 'react-router';

const renderWithHistory = (initialEntries= [], Component) => {
  let inMemHistory = createMemoryHistory({
    initialEntries
  });
  return { 
      ...render(
        <Router history={inMemHistory}>
          <Component />
        </Router >
      ), history };
};

it("should route to the expected page", () => {
      const { history } = renderWithHistory(['/currentUri'], Component1);
      // navigate here on event
      userEvent.click(screen.getByRole('button', {name: /Save/}));
      expect(history.location.pathname).toBe("/expectedUri");
});

how will it come to know where does it need to navigate, is it smart enough to do that? — Booster, Aug 07 '21 at 17:22
I don't understand what you mean..your code does that right? On click of save? Your test case was just supposed to verify the updated URL — Karthik R, Aug 08 '21 at 01:12
on save button click, I'm getting same path as I'm passing in intialEntries — Booster, Aug 08 '21 at 09:36

Mock Router in React testing library and jest

1 Answers1