How to check if mixin was passed to the component?

user_3990328 0
Viewed 385

I am testing a VueJS 2 application using vue-test-utils library and I want to check if the mixin was passed to specific component, something like mounting the component using mount and accessing the mixin throw something like wrapper.vm.mixins.

I've already tried to access using: wrapper.vm.mixin, wrapper.vm.mixins, wrapper.mixin, wrapper.mixins, wrapper.vm.$mixin and wrapper.vm.$mixins.

My vue component is like this:

export default (Vue as VueConstructor<Vue & InstanceType<typeof MyMixin>>).extend({
  name: 'MyComponent',
  mixins: [MyMixin]
})
vue-test-utils vuejs2 vue.js
1 Answers

Mixin.ts 

import Vue from 'vue';

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

export { Sum };

Answer 1:

You can import the mixin in your test and check if it was passed in wrapper.vm.$options.mixins array like this:

import { Sum } from './Sum'

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

expect(mixins).toContain(Sum)

Answer 2:

You can test by the mixins names, but you need to be sure the mixin have a name property or it will return undefined:

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

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

user_177492350
Related