如何检查 mixin 是否已传递给组件？答案

【问题标题】：How to check if mixin was passed to the component?如何检查 mixin 是否已传递给组件？
【发布时间】：2022-01-24 09:12:29
【问题描述】：

我正在使用 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]
})

【问题讨论】：

vm 是当前实例。使用时如果没有this.mixins，就没有vm.mixins。
我在我当前的 vue 实例中有它。
究竟是什么？ mixins 财产？
是的，我改进了问题以显示它在我的代码中的样子。
什么是 MyMixin？

标签： vue.js vuejs2 vue-test-utils

【解决方案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');

【讨论】：