Vue Test Utils / Jest -如何测试组件方法中是否调用了类方法
Vue Test Utils / Jest -如何测试组件方法中是否调用了类方法
提问于 2018-08-18 09:05:20
我的单元测试有一个有趣的问题。我的单元测试是用来单击组件内部的按钮的。该按钮调用一个组件方法，该方法包含一个类Service (axios的包装类)的实例。这个组件方法唯一做的事情就是调用Service.requestPasswordReset()。我的单元测试需要验证是否调用了Service.requestPasswordReset。
我知道我正在正确地模拟我的Service类，因为这在我的单元测试中通过了：
await Service.requestPasswordReset()
expect(Service.requestPasswordReset).toHaveBeenCalled()我知道我在单击时正确地调用了该方法，因为这通过了我的单元测试：
await wrapper.find('button').trigger('click')
expect(mockMethods.resend).toHaveBeenCalled()我只是不能让我的测试注册Service方法被调用。有什么想法吗？
组件
<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()__mock__中的Service.js
export default {
requestPasswordReset: jest.fn(request => {
return new Promise((resolve, reject) =>
resolve({
data: {
statusCode: 'Success',
},
})
)
})
}单元测试
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 = 'testemail@test.com'
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()
})
})Stack Overflow用户
发布于 2018-08-18 10:54:03
您可以使用inject-loader模拟您的服务
基本思想：
const RecoveryEmailSentInjector = require('!!vue-loader?inject!./AccountManagement.RecoveryEmailSent')
import Service from '@/someDir/Service'
const mockedServices = {
'@/someDir/Service': Service
}
describe('Recovery Email Sent', () => {
it('should resend recovery email', async () => {
const RecoveryEmailSentWithMocks = RecoveryEmailSentInjector(mockedServices)
const wrapper = mount(RecoveryEmailSentWithMocks, {
...
})
await wrapper.find('button').trigger('click')
expect(mockMethods.resend).toHaveBeenCalled()
expect(mockedServices.requestPasswordReset).toHaveBeenCalled()
})
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51904424
复制相关文章
相似问题
腾讯云开发者
