我如何模拟这个 Vue 注入？

Question

我有一个 Vue 3 组件，当它安装在测试中时会导致警告：

console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
  [Vue warn]: injection "Symbol(VueToastification)" not found.
    at <ModifyJob ref="VTU_COMPONENT" >
    at <VTUROOT>

我猜是这个人在抱怨 https://github.com/Maronato/vue-toastification/blob/master/composition/index.js#L30。

我有将近 100 个这样的警告，所以很难阅读 test-运行输出。我试图模拟提供这种依赖性，但我似乎无法成功：

let provide = {}
provide[VueToastification] = VueToastification
provide['VueToastification'] = VueToastification
provide[Symbol(VueToastification)] = VueToastification
provide[Symbol('VueToastification')] = VueToastification
provide['Symbol(VueToastification)'] = VueToastification

let options = {
    global: {
        provide: provide,
    }
}
mount(ModifyJob, options)

这是 Vue2/Vue3 不兼容还是我只是不理解 https://vue-test-utils.vuejs.org/v2/api/#global-provide 上的文档？有人可以帮我摆脱这些警告吗，最好是允许我注入一个模拟，这样我就可以测试吐司是否做好了？

Answer 1

该错误实际上表明该插件未安装在测试 Vue 实例中。您可以通过 global.plugins 安装选项使 VueToastification 可用于被测组件：

import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
import VueToastificationPlugin from 'vue-toastification'

it('initializes', () => {
  shallowMount(MyComponent, {
    global: {
      plugins: [VueToastificationPlugin]
    }
  })
})

或者，如果您想验证 toast()（来自 VueToastification 的 useToast()）被调用，您可以 mock vue-toastification:

import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
jest.mock('vue-toastification')

it('should call toast', () => {
  const toast = jest.fn()
  require('vue-toastification').useToast.mockReturnValueOnce(toast)
  shallowMount(MyComponent).vm.showToast()
  expect(toast).toHaveBeenCalled()
})

Answer 2

我解决了根据 https://next.vue-test-utils.vuejs.org/api/#config-global:

设置全局插件列表

// In a jest.setup.js file
import { config } from "@vue/test-utils";
import VueToastificationPlugin from "vue-toastification";

config.global.plugins = [VueToastificationPlugin];

// In your jest.config.js
module.exports = {
  ...
  setupFilesAfterEnv: ["./jest.setup.js"],
};

我如何模拟这个 Vue 注入？

How do I mock this Vue injection?

vue.js

vuejs3

vue-test-utils