Jest snapshot testing error: You should not use <Link> outside a <Router>

Question

I want to write snapshot test for my Footer component, but it throws error: You should not use <Link> outside a <Router>. Here is my code:

import React from 'react'
import renderer from 'react-test-renderer'

import Footer from '../footer'

it('Footer renders correctly', () => {
    const tree = renderer
        .create(<Footer />)
        .toJSON()

    expect(tree).toMatchSnapshot()
})

I know this happens because Footer component uses Link from react-router-dom. In order to solve this problem I wrapped Footer component in BrowserRouter:

const tree = renderer
    .create(
        <BrowserRouter>
            <Footer />
        </BrowserRouter>
    )
    .toJSON()

but now it throws error: Browser history needs a DOM

kaxi1993 · Accepted Answer · 2019-04-22 10:54:54Z

7

I used MemoryRouter instead of BrowserRouter and it solved the problem.

import React from 'react'
import { MemoryRouter } from 'react-router-dom'
import renderer from 'react-test-renderer'

import Footer from '../footer'

it('Footer renders correctly', () => {
const tree = renderer
    .create(
        <MemoryRouter>
            <Footer />
        </MemoryRouter>
    )
    .toJSON()

    expect(tree).toMatchSnapshot()
})

answered Apr 22, 2019 at 10:54

kaxi1993

4,7104 gold badges32 silver badges49 bronze badges

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

1 Comment

Pietro Nadalini Over a year ago

If anyone is still having issues due to keys not matching in the snapshot. You can follow this example and add initialEntries={[ { pathname: '/', key: 'testKey' } ]} or keyLength={0} in the MemoryRouter

Collectives™ on Stack Overflow

Jest snapshot testing error: You should not use <Link> outside a <Router>

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related