触发提交事件不更新 Jest + Vue Test Utils 中的调用计数

Question

在带有 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 | });

Answer 1

对于 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 开始）。

触发提交事件不更新 Jest + Vue Test Utils 中的调用计数

Triggering a submit event not updating call count in Jest + Vue Test Utils

javascript

vue.js

vuejs2

jestjs

vue-test-utils