为什么 Jest spyOn() 只通过了其中一个测试，而在另一个测试中失败了？

Question

我有一个 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", async () => {
    const wrapper = factory();
    let spy = jest.spyOn(wrapper.vm, "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() 尚未被调用。

这两个被监视的函数都在同一个套件中进行了测试并且工作正常（尽管在这里应该无关紧要）。两个测试都以相同的方式获取组件并以相同的方式从子组件发射。我不明白为什么一项测试通过，一项测试失败。

有什么想法吗？

Answer 1

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

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");
...