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`.

score 35 · Accepted Answer · edited Nov 27 '17 at 22:01

35

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

edited Nov 27 '17 at 22:01

Benny Neugebauer

40,817
21
196
177

answered May 04 '17 at 06:24

Andreas Köberle

88,409
51
246
277

3

The biggest problem is: `componet` refers to `StaticRouter`,so you can't get the component's instance which to be tested.you can't access its props & state such like these. – 亚里士朱德 Sep 27 '18 at 08:00
3

You may need to add `const context = {};` above `const component = ...` – Mark Swardstrom Dec 03 '18 at 07:18

score 32 · Answer 2 · answered Mar 09 '18 at 15:21

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();
  });
});

1

This was helpful, thank you. – Dale C Jan 27 '21 at 23:43

score -1 · Answer 3 · answered Jul 06 '18 at 04:59

my test like this:

import * as React from 'react'
import DataBaseAccout from '../database-account/database-account.component'
import { mount } from 'enzyme'
import { expect } from 'chai'
import { createStore } from 'redux'
import reducers from '../../../reducer/reducer'
import { MemoryRouter } from 'react-router'

let store = createStore(reducers)

describe('mount database-account', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(
      < MemoryRouter >
        <DataBaseAccout store={store} />
      </MemoryRouter >
    )
  })

  afterEach(() => {
    wrapper.unmount()
    wrapper = null
  })
})

but I don't konw why MemoryRouter can solve this。

There is a problem,wrapper refers to `MemoryRouter` component, that means you can't operate `DataBaseAccout` component,for example `wrapper.props()` and `wrapper.state()` will not work. — 亚里士朱德, Sep 27 '18 at 07:56

score -1 · Answer 4 · answered Sep 27 '18 at 08:56

Above solutions have a common default defact:

Can't access your component's instance! Because the MemoryRouter or StaticRouter component wrapped your component.

So the best to solve this problem is mock a router context, code as follows:

import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

describe('YourComponent', () => {
  test('test component with react router', () => {
    // mock react-router context to avoid violation error
    const context = {
      childContextTypes: {
        router: () => void 0,
      },
      context: {
        router: {
          history: createMemoryHistory(),
          route: {
            location: {
              hash: '',
              pathname: '',
              search: '',
              state: '',
            },
            match: { params: {}, isExact: false, path: '', url: '' },
          }
        }
      }
    };
    // mount component with router context and get component's instance
    const wrapper = mount(<YourComponent/>, context);
    // access your component as you wish
    console.log(wrapper.props(), wrapper.state())
  });
  beforeAll(() => {
    configure({ adapter: new Adapter() });
  });
});

what does `createMemoryHistory` do? – mikey Oct 16 '18 at 04:32 — mikey, Oct 16 '18 at 04:32

Using Jest to test a Link from react-router v4

4 Answers4

Linked

Related