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

之前，我创建了模拟函数，并且能够通过使用

expect（mockFunction）之类的方法测试它们是否被调用。例如，TohaveEncalledTimes（2）

然而，我有一种情况，我想看看当我模拟点击汉堡菜单时，我是如何访问组件中的特定方法的，这样我就可以在

expect

中测试它了吗

我知道我可以点击它，因为如果我把一个console.log放进去，它就会启动

我在html中有一个元素：

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

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

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
    })

---

您需要监视您的方法，然后触发click事件应该可以，类似于：

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();
}

---

您需要监视您的方法，然后触发click事件应该可以，类似于：

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();
}

---

听起来你需要的是在

toggleMobileNav

方法上设置一个间谍

---

它的工作原理与模拟非常相似，但没有替换逻辑。

听起来您需要的是在

切换mobilenav

方法上设置一个间谍

---

它的工作原理与模拟非常相似，但没有替换逻辑。

谢谢！也可以使用jest.spyOn模拟子组件中的发射吗@AdriSolidMmm不确定，您是否检查了vue测试工具？非常感谢。也可以使用jest.spyOn模拟子组件中的发射吗@AdriSolidMmm不确定，您是否检查了vue测试工具？

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

        expect(spy).toHaveBeenCalled(); 
        spy.mockRestore();
    })