开玩笑的快照测试错误:您不应使用< Link>在< Router>外部 [英] Jest snapshot testing error: You should not use <Link> outside a <Router>

问题描述

我想为我的Footer组件编写快照测试，但是会引发错误:You should not use <Link> outside a <Router>.这是我的代码:

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

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

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

但现在它引发错误:Browser history needs a DOM

推荐答案

我使用了MemoryRouter而不是BrowserRouter，它解决了这个问题.

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

这篇关于开玩笑的快照测试错误:您不应使用< Link>在< Router>外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！