Jest 单元测试期间 Vue 路由器的注入失败

Question

在具有 Composition API（和 Vue 3）的 .vue 文件中，设置路由器：

const router = useRouter()

在玩笑测试中挂载 .vue 文件：

const wrapper = mount(Lookup)

执行时，产生：

console.warn
    [Vue warn]: injection "Symbol([vue-router]: router)" not found.
      at <Anonymous ref="VTU_COMPONENT" >
      at <VTUROOT>

模拟它会产生相同的输出：

useRouter().push = jest.fn()

设置提供相同输出的结果：

import { useRouter } from 'vue-router'
...
const wrapper = mount(Lookup, {
  global: {
    plugins: [useRouter],
    provide: {
      router: {},
    },
  },
})

Answer 1

这个解决方案允许我在 Jest 中进行模拟useRouter()。请注意，这是使用组合 API 的useRouter()唯一方法，因为不可用：vue-routerthis

const routerPushMock = jest.fn();

jest.mock('vue-router', () => ({
  useRouter: () => ({
    push: routerPushMock,
  }),
}));

test('...', async () => {
  const wrapper = mount(vueFile)
  ...

Answer 2

如果有人还有这个错误

babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.

我建议这样写

const mockPush = jest.fn();
jest.mock('vue-router', () => ({
  useRouter: () => ({
    push: mockPush,
  }),
}));

给它命名（mockXYZ）很重要mockPush，因为根据： https: //github.com/facebook/jest/issues/2567，这个特定的命名是一个逃生舱口。