触发提交事件不更新 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'); ❌

  ⋮
});

demo

在 Vue 3 中,可以直接从 wrapper.vm 中模拟 post-mount 方法(从 Vue 3.2.31 开始)。