如何检查 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 };

答案一：

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

import { Sum } from './Sum'

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

expect(mixins).toContain(Sum)

答案二：

您可以通过混音名称进行测试，但您需要确保混音具有 名称属性 否则它将 return 未定义:

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

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

如何检查 mixin 是否传递给了组件？

How to check if mixin was passed to the component?

vue.js

vuejs2

vue-test-utils