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组件使用了Link中的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()
})

开玩笑的快照测试错误：您不应在<router>外使用<link />

1 个答案: