React router dom v6 'Link' component issue with react testing library

Question

I have a component which contains a Link component from react router dom v6.

MyComponent.jsx

...

<Link to='/path'>
   Som Text
</Link>

...

But if I try to render this component using react testing library.

render(
    <BrowserRouter>
        <MyComponent />
    </BrowserRouter>,
);

I get this error - TypeError: Cannot read properties of undefined (reading 'createHref').

I have tried removing Link from the component and just replacing it with div. The error goes away so it means it is coming from the Link component.

Drew Reese · Accepted Answer · 2023-06-09 20:37:56Z

0

Many unit test environments tend to be non-DOM environments, so using the BrowserRouter might not be the best choice of router to use. The MemoryRouter is ideally suited for non-DOM environments.

A <MemoryRouter> stores its locations internally in an array. Unlike <BrowserHistory> and <HashHistory>, it isn't tied to an external source, like the history stack in a browser. This makes it ideal for scenarios where you need complete control over the history stack, like testing.

In your unit tests for components that require a routing context be provided to them, e.g. components that render Links and Routes, you should import and wrap these components with the MemoryRouter.

import { MemoryRouter } from 'react-router-dom';

...

<MemoryRouter>
  <MyComponent />
</MemoryRouter>

answered Jun 9, 2023 at 20:37

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React router dom v6 'Link' component issue with react testing library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related