触发提交事件不更新 Jest + Vue Test Utils 中的调用计数
Triggering a submit event not updating call count in Jest + Vue Test Utils
在带有 Jest 的 Vue 2.6.12
中:"^27.5.1"
和 "@vue/test-utils": "^1.3.0",
我正在尝试使用 jest 模拟一个 async
方法。当我断言我的方法已被调用 1 次时,returns 它尚未被调用。我做错了什么吗?
更新电子邮件测试
import {mount} from '@vue/test-utils';
import UpdateEmail from './components/update-email.vue';
//validate form method testing
test('should submit form', async () => {
let wrapper = mount(UpdateEmail);
const mockedFormSubmit = jest.spyOn(UpdateEmail.methods, 'updateEmail');
// //Get our form fields
await wrapper.find('#email').setValue('johndoe@test.com')
await wrapper.find('#password').setValue('MyPassword');
await wrapper.find('form').trigger('submit.prevent');
expect(mockedFormSubmit).toHaveBeenCalledTimes(1);
});
更新电子邮件方法
async updateEmail() {
this.validateFields();
try {
await axios.post(this.updateEmailPath, {
password: this.password,
email: this.email
});
} catch (e) {
console.log(e.message);
}
},
测试运行时控制台输出:
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
35 | await wrapper.find('form').trigger('submit.prevent');
36 |
> 37 | expect(mockedFormSubmit).toHaveBeenCalledTimes(1);
| ^
38 | });
39 | });
对于 Vue 2,必须在 安装组件之前 模拟该方法,因为组件的 .methods
仅在安装时连接:
test('should submit form', async () => {
const mockedFormSubmit = jest.spyOn(UpdateEmail.methods, 'updateEmail'); ✅
let wrapper = mount(UpdateEmail);
// const mockedFormSubmit = jest.spyOn(UpdateEmail.methods, 'updateEmail'); ❌
⋮
});
在 Vue 3 中,可以直接从 wrapper.vm
中模拟 post-mount 方法(从 Vue 3.2.31 开始)。
在带有 Jest 的 Vue 2.6.12
中:"^27.5.1"
和 "@vue/test-utils": "^1.3.0",
我正在尝试使用 jest 模拟一个 async
方法。当我断言我的方法已被调用 1 次时,returns 它尚未被调用。我做错了什么吗?
更新电子邮件测试
import {mount} from '@vue/test-utils';
import UpdateEmail from './components/update-email.vue';
//validate form method testing
test('should submit form', async () => {
let wrapper = mount(UpdateEmail);
const mockedFormSubmit = jest.spyOn(UpdateEmail.methods, 'updateEmail');
// //Get our form fields
await wrapper.find('#email').setValue('johndoe@test.com')
await wrapper.find('#password').setValue('MyPassword');
await wrapper.find('form').trigger('submit.prevent');
expect(mockedFormSubmit).toHaveBeenCalledTimes(1);
});
更新电子邮件方法
async updateEmail() {
this.validateFields();
try {
await axios.post(this.updateEmailPath, {
password: this.password,
email: this.email
});
} catch (e) {
console.log(e.message);
}
},
测试运行时控制台输出:
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
35 | await wrapper.find('form').trigger('submit.prevent');
36 |
> 37 | expect(mockedFormSubmit).toHaveBeenCalledTimes(1);
| ^
38 | });
39 | });
对于 Vue 2,必须在 安装组件之前 模拟该方法,因为组件的 .methods
仅在安装时连接:
test('should submit form', async () => {
const mockedFormSubmit = jest.spyOn(UpdateEmail.methods, 'updateEmail'); ✅
let wrapper = mount(UpdateEmail);
// const mockedFormSubmit = jest.spyOn(UpdateEmail.methods, 'updateEmail'); ❌
⋮
});
在 Vue 3 中,可以直接从 wrapper.vm
中模拟 post-mount 方法(从 Vue 3.2.31 开始)。