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