Vue Test Utils / Jest - How to test if class method was called within a component method
I figured it out. Apparently, Jest's .toHaveBeenCalled()
doesn't return true if the method in question was called with parameters. You MUST use .toHaveBeenCalledWith()
. I don't see anything about this caveat in their docs, but it does seem to be the case.
Here is my passing test code
it('should resend email hash', async () => {
const email = '[email protected]'
const wrapper = mount(AccountManagementForgottenPasswordSubmitted, {
localVue,
computed: {
userEmail() {
return email
},
},
})
await wrapper.find('button').trigger('click')
expect(Service.requestPasswordReset).toHaveBeenCalledWith({
email: email
})
})
EmacsVI
Updated on June 13, 2022Comments
-
EmacsVI almost 2 years
I have an interesting problem with a unit test of mine. My unit test is written to click on a button inside a component. This button calls a component method which contains an instance of a class
Service
(a wrapper class for axios). The only thing this component method does is callService.requestPasswordReset()
. My unit test needs to verify thatService.requestPasswordReset
was called.I know I'm mocking my Service class correctly, because this passes in my unit test:
await Service.requestPasswordReset() expect(Service.requestPasswordReset).toHaveBeenCalled()
And I know that I'm calling the method correctly on click because this passes in my unit test:
await wrapper.find('button').trigger('click') expect(mockMethods.resend).toHaveBeenCalled()
I just can't get my test to register that the
Service
method gets called. Any ideas?Component
<template lang="pug"> Layout section header( class="text-center py-4 pb-12") h1( class="text-grey-boulder font-light mb-4") Recovery Email p( class="text-orange-yellow") A recovery email has been sent to your email address div( class="text-center") div( class="mb-6") button( type="button" @click.stop="resend()" class="bg-orange-coral font-bold text-white py-3 px-8 rounded-full w-48" ) Resend Email </template> <script> import Layout from '@/layouts/MyLayout' import Service from '@/someDir/Service' export default { name: 'RecoveryEmailSent', page: { title: 'Recovery Email Sent', }, components: { Layout, }, data() { return { errorMessage: null } }, computed: { userEmail() { const reg = this.$store.getters['registration'] return reg ? reg.email : null }, }, methods: { async resend() { try { await Service.requestPasswordReset({ email: this.userEmail, }) } catch (error) { this.errorMessage = error } }, }, } </script>
Service.js
import client from '@/clientDir/BaseClient' class Service { constructor() { this.client = client(baseUrl) } requestPasswordReset(request) { return this.client.post('/account_management/request_password_reset', request) } } export { Service } export default new Service()
Service.js in
__mock__
export default { requestPasswordReset: jest.fn(request => { return new Promise((resolve, reject) => resolve({ data: { statusCode: 'Success', }, }) ) }) }
Unit Test
jest.mock('@/someDir/Service') import { shallowMount, mount, createLocalVue } from '@vue/test-utils' import RecoveryEmailSent from './AccountManagement.RecoveryEmailSent' import Service from '@/someDir/Service' const localVue = createLocalVue() // localVue.use(Service) // <-- Tried this, didn't work describe('Recovery Email Sent', () => { it('should resend recovery email', async () => { const mockMethods = { resend: jest.fn() } const email = '[email protected]' const wrapper = mount(RecoveryEmailSent, { localVue, computed: { userEmail() { return email }, }, methods: mockMethods }) // await Service.requestPasswordReset() await wrapper.find('button').trigger('click') expect(mockMethods.resend).toHaveBeenCalled() expect(Service.requestPasswordReset).toHaveBeenCalled() }) })