reactjs - 如何重用 react-router 的 useHistory 的 Jest 模拟

Question

我在 mock useHistory的 react-router-dom在我这样的测试中:

jest.mock("react-router-dom", () => ({
  useHistory: () => ({
    length: 13,
    push: jest.fn(),
    block: jest.fn(),
    createHref: jest.fn(),
    go: jest.fn(),
    goBack: jest.fn(),
    goForward: jest.fn(),
    liten: jest.fn(),
    replace: jest.fn(),
    action: "REPLACE",
    location: null
  })
}));

这在单个测试中工作得非常好，但我基本上每个测试都需要这个，我不想每次都复制它。

我怎样才能重用这个模拟？我已经尝试了显而易见的方法，将其移动到不同的文件并导出一个创建模拟的函数:
export default () => jest.mock("react-router-dom", () => ({...})
但是，导入它并调用函数来创建模拟会导致错误。

import useHistoryMock from "../../../testUtils/hooks/useHistory";
useHistoryMock()

我的组件实现然后抛出 TypeError: Cannot read property 'history' of undefined ，如果我在测试文件本身中定义模拟，则不会。

重用模拟的便捷方法是什么？我正在使用 typescript ，所以我最好不想破坏任何编译器规则。

Answer 1

您可以尝试使用 __mocks__文件夹
https://jestjs.io/docs/en/manual-mocks.html