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 ? "active" : ""}>
        <Link to={to} {...rest} />
      </li>
    )}
  </Route>
);

export default () => (
  <div>
    <h1>This is home page our our application.</h1>
    <ul>
      <MenuLink to="/about">About Us</MenuLink>
      <MenuLink to="/login">Login</MenuLink>
      <MenuLink to="/contact">Contact</MenuLink>
    </ul>
  </div>
);

Now, to test it, we know that we have to mock the Link component. In Chapter 2, Testing, you saw that you can easily mock the Link component, as follows:

jest.mock("react-router-dom/Link", () => "Link");

However, in this case, we are passing a function as the child component. To mock that, we need to mock its individual function. One of the ways that we can do that is given as follows:

import React from "react";
import renderer from "react-test-renderer";
import HomePage from "../index";

jest.mock("react-router-dom", () => ({
  Link: "Link",
  Route: ({ children, path }) => children({ match: path === "/link-path" })
}));

it("should render correctly", () => {
  const component = renderer.create(<HomePage />);
  expect(component.toJSON()).toMatchSnapshot();
});

Does it make sense? I hope it does. We mocked the individual component. Run the test from the command line as usual (yarn test) and check the snapshot file. The snapshot file should look as follows:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should render correctly 1`] = `
<div>
  <h1>
    This is home page our our application.
  </h1>
  <ul>
    <li
      className=""
    >
      <Link
        to="/about"
      >
        About Us
      </Link>
    </li>
    <li
      className=""
    >
      <Link
        to="/login"
      >
        Login
      </Link>
    </li>
    <li
      className=""
    >
      <Link
        to="/contact"
      >
        Contact
      </Link>
    </li>
  </ul>
</div>
`;

Note that each of the route links has been modified into an individual Link component. Sometimes, testing can be tricky. If you accidentally mock the main component, your snapshot file will only contain the mocked string. It will pass your test, but in reality, it is not testing each line of your code. So, it is very wise to check the snapshot file, in order to check whether the test has created the snapshot correctly.