Testing router links
In this section, you’ll learn how to use and test the Link component. This component is React Router’s version of the humble HTML anchor (or a) tag.
There are two forms of the Link component that we use. The first uses the to prop as a string, for example, /addCustomer:
<Link to="/addCustomer" role="button"> Add customer and appointment </Link>
The second sets the to prop to an object with a search property:
<Link
to={{
search: objectToQueryString(queryParams),
}}
>
{children}
</Link>
This object form also takes a pathname property, but we can avoid setting that since the path remains the same for our use case.
We’ll look at two different ways of testing links: the standard way (by checking for hyperlinks), and the slightly more painful way of using mocks.