Mocking react-router-dom for testing

We already explored the ways that we can test react-router-dom in Chapter 2, Testing. In this chapter, we will explore some of the advanced-level testing problems that we can face in react-router-dom testing.

We already have JEST configured in our application. Let's consider the HomePage/index component. In the preceding snippet, we are using the Link component from react-router-dom, but instead of using it in a normal way, we are passing the function as the child component. If you are not aware of this, we suggest reading about it (https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9):

import React from "react";
import { Route, Link } from "react-router-dom";

const MenuLink = ({ to, ...rest }) => (
  <Route path={to}>
    {({ match }) => (
      <li className={match ?...