Jest Test 中的触发事件不调用 Method

Posted 2023-02-22

【中文标题】Jest Test 中的触发事件不调用 Method

【英文标题】：Trigger event in Jest Test does not call Method

【发布时间】：2020-02-11 01:08:03

【问题描述】：

我目前正在为我的 Vue 应用程序编写测试。我有一个调用注销功能的按钮。我只想测试当按钮被点击时函数是否被调用。

我试图用 jest.fn() 模拟这个函数，但我无法让它工作。我还尝试实际触发该方法并将 console.log 放入该方法中，但该日志没有被调用。我做错了什么？

这是我的包装器设置：

let wrapper;

beforeEach(() => 
    Vue.use(Vuetify);
    Vue.prototype.$router = new VueRouter();
    wrapper = shallowMount(Navigation);
);

afterEach(() => 
    wrapper.destroy();
);

it('should call logout function on button click', function() 
        let submitLogoutMock = jest.fn();
        wrapper.vm.submitLogout = submitLogoutMock;

        wrapper
            .find('#logout-button')
            .trigger('click');

        expect(submitLogoutMock).toHaveBeenCalled();
    );

我希望调用模拟方法，但实际上我收到一条错误消息：

Error: expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called, but it was not called.

【问题讨论】：

验证您的组件是在侦听自定义的click 事件还是本地事件，因为现在看起来您正在触发本地click 事件。

<v-btn icon id="logout-button" @click.native="logout"> 我再次尝试研究并添加了.native，现在我的测试工作了.. 你能解释一下为什么我真的不明白原生点击和普通点击之间的区别

.native 修饰符监听原生 DOM 事件，例如 button 元素发出的 click 事件。默认情况下，当您使用v-on 或@ 速记时，vue 会侦听custom events，您使用$emit 触发的那些。

【参考方案1】：

当使用shallowMount 时，组件的方法应该被存根。您可以在创建包装器时或使用setMethods() 来实现此目的。

你只需要改变你的单元测试：

  it('should call logout function on button click', () => 
    const submitLogoutMock = jest.fn();
    wrapper.setMethods( submitLogout: submitLogoutMock );

    wrapper.find('#logout-button').trigger('click');

    expect(submitLogoutMock).toHaveBeenCalled();
  );