Using Jest to test a Link from react-router v4

Question

I'm using jest to test a component with a <Link> from react-router v4.

I get a warning that <Link /> requires the context from a react-router <Router /> component.

How can I mock or provide a router context in my test? (Basically how do I resolve this warning?)

Link.test.js

import React from 'react'; import renderer from 'react-test-renderer'; import { Link } from 'react-router-dom';  test('Link matches snapshot', () => {   const component = renderer.create(     <Link to="#" />   );    let tree = component.toJSON();   expect(tree).toMatchSnapshot(); }); 

The warning when the test is run:

Warning: Failed context type: The context `router` is marked  as required in `Link`, but its value is `undefined`. 

Answer 1

You can wrap your component in the test with the StaticRouter to get the router context into your component:

import React from 'react'; import renderer from 'react-test-renderer'; import { Link } from 'react-router-dom'; import { StaticRouter } from 'react-router'  test('Link matches snapshot', () => {   const component = renderer.create(     <StaticRouter location="someLocation" context={context}>       <Link to="#" />     </StaticRouter>   );    let tree = component.toJSON();   expect(tree).toMatchSnapshot(); }); 

Have a look at the react router docs about testing

Answer 2

I had the same issue and using StaticRouter would still require the context which needed more configuration to have it available in my test, so I ended up using the MemoryRouter which worked very well and without any issues.

import React from 'react'; import renderer from 'react-test-renderer'; import { MemoryRouter } from 'react-router-dom';  // SampleComponent imports Link internally import SampleComponent from '../SampleComponent';  describe('SampleComponent', () => {   test('should render', () => {     const component = renderer       .create(         <MemoryRouter>           <SampleComponent />         </MemoryRouter>       )       .toJSON();      expect(component).toMatchSnapshot();   }); });