Jest 快照测试错误：您不应在 <Router> 之外使用 <Link>

Question

我想为我的Footer组件编写快照测试，但它抛出错误：You should not use <Link> outside a <Router>。这是我的代码：

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

我知道发生这种情况是因为Footer组件使用Linkfrom react-router-dom. 为了解决这个问题，我将Footer组件包装在BrowserRouter：

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

但现在它抛出错误：Browser history needs a DOM

Answer 1

我使用了MemoryRouter它BrowserRouter，它解决了问题。

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