How to mock Vue Mixins during unit testing using vue-test-utils and jest? How to mock Vue Mixins during unit testing using vue-test-utils and jest? vue.js vue.js

How to mock Vue Mixins during unit testing using vue-test-utils and jest?


There are two ways:

  1. You can use createLocalVue, and register a mixin on that localVue class:
const localVue = createLocalVue()localVue.mixin(myMixin)const wrapper = shallow(Post, {    localVue,})
  1. You can pass mixins in the mounting options:
const wrapper = shallow(Post, {    mixins: [myMixin],})


I managed to mock the mixin methods with jest spies like this:

/// MyComponent.spec.jsdescribe('MyComponent', () => {  let wrapper  let localVue  let store  let spies = {}    beforeEach(async () => {    spies.mixinMethodName = jest.spyOn(MyComponent[1].methods, 'spies.mixinMethodName')    ({ localVue, store } = (... custom factory ...)    wrapper = await shallowMount(MyComponent, { localVue, store })  })  it('check mixin methods calls', () => {    expect(spies.mixinMethodName).toHaveBeenCalled()  })})

Of course the spies object and its attached method can be customized as your wish.

The weakness of this method is that it relies on the order of the mixins entered in the real Vue component. For this example, this looks like:

/// MyComponent.vue<script>  export default {    components: { ...components... },    mixins: [mixin1, mixin2ToBeTested],    data () {}    ....}</script>