I'm learning TDD whilst building my Vue app, and trying to abide by the strict laws of only writing enough production code to satisfy a failing unit test. I am really enjoying this approach, but I have run into a roadblock in regards to adding methods to a Vue instance, and testing that they have been called when the event fires from the element in the template.
I cannot find any suggestions as to how I can mock a Vue method given that if I mock the proxied method, it ends up not being called (I'm using Jest and Vue Test Utils).
I am also using Cypress, so I can fill in this test in e2e, but I would like to be able to cover as much as possible with unit tests.
I own the book "Testing Vue.js Applications" by Edd Yerburgh, but in the section regarding testing component methods, he simply states the following:
Often, components use methods internally. For example, to log to the console when a button is clicked [...] You can think of these as private methods—they aren’t intended to be used outside of the component. Private methods are implementation details, so you don’t write tests for them directly.
This approach obviously does not allow the stricter laws of TDD to be followed, so how do the TDD purists handle this?
ButtonComponent.vue
<template>
<button @click="method">Click me</button>
</template>
<script>
export default: {
methods: {
method () {
// Have I been called?
}
}
}
</script>
ButtonComponent.spec.js
it('will call the method when clicked', () => {
const wrapper = shallowMount(ButtonComponent)
const mockMethod = jest.fn()
wrapper.vm.method = mockMethod
const button = wrapper.find('button')
button.vm.$emit('click')
expect(mockMethod).toHaveBeenCalled()
// Expected mock function to have been called, but it was not called
})
jest.spyOn(Component.methods, 'METHOD_NAME')
You could use jest.spyOn
to mock the component method before mounting:
import MyComponent from '@/components/MyComponent.vue'
describe('MyComponent', () => {
it('click does something', async () => {
const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')
await shallowMount(MyComponent).find('button').trigger('click')
expect(mockMethod).toHaveBeenCalled()
})
})
The official recommendation is to "abstract the hard parts away", and use Jest's various mocking mechanisms to mock the abstracted module invoked by the component under test.
For example, to verify a click
-handler is invoked:
click
-handler's body into a shared JavaScript file.jest.mock()
to mock the exported functions of the shared module.beforeEach()
. This might only be necessary when there are multiple tests in the suite.// @/components/MyComponent/utils.js
export function doSomething() { /*...*/ } //1️⃣
// @/components/MyComponent/MyComponent.vue (<script>)
import { doSomething } from '@/components/MyComponent/utils' //2️⃣
export default {
methods: {
onClick() {
doSomething() //1️⃣
}
}
}
// @/test/MyComponent.spec.js
import { doSomething } from '@/components/MyComponent/utils' //2️⃣
jest.mock('@/components/MyComponent/utils') //3️⃣
describe('MyComponent', () => {
beforeEach(() => doSomething.mockClear()) //4️⃣
it('click does something', async () => {
await shallowMount(MyComponent).find('button').trigger('click')
expect(doSomething).toHaveBeenCalled()
})
})
setMethods()
(pre v1.0)Use setMethods()
(deprecated as of v1.0) to overwrite a component method:
describe('MyComponent', () => {
it('click does something', async () => {
// Option A:
const mockMethod = jest.fn()
const wrapper = shallowMount(MyComponent)
wrapper.setMethods({ doSomething: mockMethod })
await wrapper.find('button').trigger('click')
expect(mockMethod).toHaveBeenCalled()
// Option B:
const mockMethod = jest.fn()
const wrapper = shallowMount(MyComponent, {
methods: {
doSomething: mockMethod
}
})
await wrapper.find('button').trigger('click')
expect(mockMethod).toHaveBeenCalled()
})
})