I have read the documentation for vue-test-utils and Jest, but I am still unsure about how to properly mock Vue mixins in a Vue component and test the component.
Add a comment
|
3 Answers
There are two ways:
- You can use createLocalVue, and register a mixin on that
localVueclass:
const localVue = createLocalVue()
localVue.mixin(myMixin)
const wrapper = shallow(Post, {
localVue,
})
- You can pass
mixinsin the mounting options:
const wrapper = shallow(Post, {
mixins: [myMixin],
})
6 Comments
葛厚德
If I wanna mock the plugin used by component,what's the next step?
mlohbihler
This does not work for me, and i don't see anything in the vue-test-utils code related to this. How can i mock the mixin that i register into a SPC? No matter what i do the mixin's
mounted method always runs.
Jalil
Then how do you call the methods? with
this.myMethod?
Damon
@Edd how do these techniques relate to globally registered mixins vs locally imported and registered mixins? I want to mock all instances of a locally used mixin as simply as possible, but not sure the best approach
onekiloparsec
The provided answer does not mock the mixin. It only explains how to install the mixin in the localVue instance.
|
For those using Vue 3 with Vue Test Utils, then you just need to mock the individual method, for example with Jest. Pass in your myMixin as normal, and then spy on the method you want to mock:
const wrapper = mount(Post, {
global: {
mixins: [myMixin],
},
} as any)
jest.spyOn(wrapper.vm, 'myMixinMethodToMock').mockImplementation()
Note that Jest mocks it without caring that the method is on the mixin, not the Vue component.
Comments
I managed to mock the mixin methods with jest spies like this:
/// MyComponent.spec.js
describe('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>
