为什么Jest spyOn仅通过其中一个测试，但不通过另一个测试？

问题描述

我有一个vue子组件：

    <NavbarSnap
      title="Select Recipient"
      data-testid="navbarsnap"
      v-on:change-screen-handler="onHandleChangeScreen('SnapRecepient')"
      :hasSearch="true"
      :hasInvite="true"
      :groupName="getSelectedChannel.CNM"
      v-on:search-input="handleSearchInputChange"
    />

该组件具有两个v-on指令。

我有两个几乎相同的测试。但是第一个通过了，第二个失败了：

  it("NavBarSnap change screen",async () => {
    const wrapper = factory();
    let spy = jest.spyOn(wrapper.vm,"onHandleChangeScreen");

    let element = wrapper.find("[data-testid='navbarsnap']");

    expect(element.exists()).toBeTruthy();
    element.vm.$emit("change-screen-handler");
    await wrapper.vm.$nextTick();

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

  it("NavBarSnap search input","handleSearchInputChange");

    let element = wrapper.find("[data-testid='navbarsnap']");

    expect(element.exists()).toBeTruthy();
    element.vm.$emit("search-input");
    await wrapper.vm.$nextTick();

    expect(spy).toHaveBeenCalled();
    // THIS TEST FAILS
  });

由于未调用jest.fn()，所以测试失败。

这两个间谍功能都在同一个套件中进行了测试，并且工作正常（尽管这里无关紧要）。两种测试都以相同的方式获取组件并以相同的方式从子组件中发出。我不明白为什么一项测试通过但一项失败。

有什么想法吗？

解决方法

区别在于事件处理程序的注册方式：

v-on:change-screen-handler="onHandleChangeScreen('SnapRecepient')"

和

v-on:search-input="handleSearchInputChange"

前者根据组件实例评估表达式，而不仅限于方法。后者使用handleSearchInputChange方法作为事件处理程序，这需要在组件实例化之前对其进行监视：

let spy = jest.spyOn(Component.methods,"handleSearchInputChange");
const wrapper = factory();
...

为保持一致性，应为v-on:search-input="handleSearchInputChange()"。这样可以监视类似于onHandleChangeScreen的实例：

let spy = jest.spyOn(wrapper.vm,"handleSearchInputChange");
...