开玩笑 `resetModules()` 正在破坏 `react-router-dom` 上下文答案

【问题标题】：Jest `resetModules()` is breaking `react-router-dom` Context开玩笑 `resetModules()` 正在破坏 `react-router-dom` 上下文
【发布时间】：2019-06-19 09:59:19
【问题描述】：

我正在测试一个包含Link 组件的组件。它还需要Service.js 提供的上下文。

代码如下：

import React from "react"
import { Link } from "react-router-dom"
import { Context } from "./Service"

const List: React.FC = () => (
    <Context.Consumer>
        {items => (
            <div>
                {items
                    .map(({ name, id }) => (
                        <Link
                            to={`/items/${id}`}
                            key={id}
                        >
                            <p>{name}</p>
                        </Link>
                    ))}
            </div>
        )}
    </Context.Consumer>
)

export default List

当我运行以下测试时，我得到了错误：

Invariant failed: You should not use <Link> outside a <Router>

测试：

import React from "react"
import renderer from "react-test-renderer"
import { MemoryRouter } from "react-router"

describe("<List>", () => {
    beforeEach(() => jest.resetModules())

    it("renders with zero items", () => {
        jest.doMock("./Service", () => ({
            Context: {
                Consumer: (props: any) => props.children([]),
            },
        }))
        const List = require("./List").default
        const tree = renderer
            .create(<MemoryRouter><List /></MemoryRouter>)
            .toJSON()        
        expect(tree).toMatchSnapshot()
    })

    it("renders with items", () => {
        jest.doMock("./Service", () => ({
            Context: {
                Consumer: (props: any) =>
                   props.children([{ name: "d", id: "d" }]),
            },
        }))
        const List = require("./List").default
        const tree = renderer
            // this line throws the error!
            .create(<MemoryRouter><List /></MemoryRouter>)
            .toJSON()        
        expect(tree).toMatchSnapshot()
    })
})

注意：如果我删除 beforeEach(() => jest.resetModules()) 测试有效，但它忽略第二个模拟，使用空数组运行。

【问题讨论】：

标签： reactjs mocking react-router jestjs

【解决方案1】：

通过强制重新导入路由器为每个测试修复：

    // ...
    const { MemoryRouter } = require("react-router")`
    const List = require("./List").default
    const tree = renderer
    // ...

虽然看起来很冗长。如果有更好的解决方案，请添加，谢谢！

【讨论】：