Vue 组件中的 toHaveBeenCalled() 玩笑测试失败

Question

在测试中使用“点击”触发器无法正常调用函数。

1. 我调用了函数 - 它正在工作

2. 我触发了点击，但测试失败。

   describe("Message.test.js", () => {
       let wrapper;
       const createWrapper = propsData => mount(Message, { propsData 
   
       describe("Events", () => {
           beforeEach(() => {
            wrapper = createWrapper({ message: "Cat" });
       }); 
   
       //Working
       it("calls handleClick", () => {
           const spy = jest.spyOn(wrapper.vm, 'handleClick');
           wrapper.vm.handleClick();
           expect(spy).toHaveBeenCalled();
       });
   
       //NOT WORKING. WHY?
   
       it("calls handleClick when click on message", () => {
           wrapper.vm.handleClick = jest.fn();
           //It is Ok
           expect(wrapper.contains('.message')).toBe(true);
           // @click="handleClick" on element
           wrapper.find('.message').trigger('click');
           expect(wrapper.vm.handleClick).toHaveBeenCalledTimes(1);
       })
   });
   

我在函数中添加了console.log。在测试过程中，我看到调用了什么函数。

Answer 1

 it('calls handleClick when click on message', () => {
            const handleClick = jest.fn()
            wrapper.setMethods({ handleClick })
            const el = wrapper.find('.message').trigger('click')
            expect(handleClick).toBeCalled()
        })
// stub
        it('triggers a message-clicked event when a handleClick method is called', () => {
            const stub = jest.fn()
            wrapper.vm.$on('message-clicked', stub)
            wrapper.vm.handleClick()
            expect(stub).toBeCalledWith('Cat')
        })