在 Jest 中，如何测试组件中的非模拟方法是否正在单击时运行？

Question

以前，我创建了模拟函数，并且能够使用类似的方法来测试它们是否被调用expect(mockFunction).toHaveBeenCalledTimes(2)。

但是，我有一种情况，我想看看当我模拟单击汉堡菜单时，如何访问组件中的特定方法，以便我可以在 中测试它expect？

我知道我可以通过单击到达它，因为如果我将 console.log 放入其中，它就会触发。

我在 html 中有一个元素：

<hamburger class="hamburger" @click.native="toggleMobileNav"/>

我的方法是：

toggleMobileNav() {
      console.log('this console log works on click');
      //...add classes to nav for css
    },

在我的测试中我需要做这样的事情：

it('should be able to toggle nav in mobile', async () => {
        wrapper.find('.hamburger').trigger('click');

        expect(notebookNav.toggleMobileNav()).toHaveBeenCalled(); //doesn't work because it is not a mock or spy function
    })

Answer 1

您需要监视您的方法，然后触发单击事件应该没问题，例如：

it('should be able to toggle nav in mobile', () => {
  const toggleMobileNavSpy = jest.spyOn(notebookNav, 'toggleMobileNav');

  expect(toggleMobileNavSpy).toHaveBeenCalledTimes(0);
  wrapper.find('.hamburger').trigger('click');
  expect(toggleMobileNavSpy).toHaveBeenCalledTimes(1);

  toggleMobileNavSpy.mockClear();
}