vue.js - 如何检查 mixin 是否传递给了组件？

Question

我正在使用 vue-test-utils 库 测试 VueJS 2 应用程序，我想检查 mixin 是否已传递 到特定组件，例如安装组件使用 mount 并访问 mixin 会抛出类似 wrapper.vm.mixins 的内容。

我已经尝试访问使用:wrapper.vm.mixin, wrapper.vm.mixins, wrapper.mixin, wrapper.mixins、wrapper.vm.$mixin 和 wrapper.vm.$mixins。

我的vue组件是这样的:

export default (Vue as VueConstructor<Vue & InstanceType<typeof MyMixin>>).extend({
  name: 'MyComponent',
  mixins: [MyMixin]
})

Answer 1

Mixin.ts

import Vue from 'vue';

const Sum = Vue.extend({
  name: 'Sum',
  methods: {
       sum(numA: number, numB: number) {
        return numA + numB;
       }
  }
});

export { Sum };

答案 1:

您可以在测试中导入 mixin 并检查它是否在 wrapper.vm.$options.mixins 数组中传递，如下所示:

import { Sum } from './Sum'

const mixins = wrapper.vm.$options.mixins as any;

expect(mixins).toContain(Sum)

答案 2:

您可以通过 mixin 名称进行测试，但您需要确保 mixin 具有name 属性，否则它将返回undefined:

const mixins = (wrapper.vm.$options.mixins as any).map((mixin: any) => mixin.options.name)

expect(mixins).toContain('Sum');