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

Posted 2023-02-22

【中文标题】Vue 组件中的 toHaveBeenCalled() 玩笑测试失败

【英文标题】：Failed toHaveBeenCalled() jest test in Vue component

【发布时间】：2019-05-01 14:45:01

【问题描述】：

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

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

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

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。在测试过程中，我看到调用了什么函数。

【参考方案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')
        )