使用 jest-test-utils (vue-bootstrap) 在 b-modal 上未触发 @ok 侦听器

Question

我正在使用带有 @ok="save" 钩子的 vue-bootstrap b-modal

mycomponent.vue 看起来像这样：

<template>
  <div>
    <b-button @click="add">open modal</b-button>
    <b-modal static lazy id="modal-detail" @ok="save">
      <b-form-input v-model="fooName"></b-form-input>
    </b-modal>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { RestClient } from "./RestClient";

@Component({ name: "fooController" })
export default class FooController extends Vue {
  public fooName = "";
  public add(): void {
    this.$root.$emit("bv::show::modal", "modal-detail");
  }
  public save(): void {
    console.log("in save method");
    RestClient.create(this.fooName);
  }
}
</script>

RestClient.ts 看起来像这样：

export class RestClient {
  static create(payload: string) {
    return payload;
  }
}

测试看起来像这样：

import { createLocalVue, mount } from "@vue/test-utils";
import BootstrapVue from "bootstrap-vue";
import MyComponent from "./mycomponent.vue";
import { RestClient } from "./RestClient";

jest.mock("./RestClient.ts", () => ({
  RestClient: {
    create: jest.fn(() => {
      return {};
      //   return Promise.resolve({});
    })
  }
}));

describe("component test", () => {
  const localVue = createLocalVue();
  localVue.use(BootstrapVue);

  it("should call the create method on the REST client when ok-ing the modal", (done) => {
    const wrapper = mount(MyComponent, {
      attachToDocument: true,
      localVue
    });
    expect(wrapper.isVueInstance()).toBe(true);

    // there is just one button: the open modal button
    wrapper.find("button").trigger("click");
    const modal = wrapper.find("#modal-detail");

    modal.vm.$emit("ok");

    return wrapper.vm.$nextTick().then(() => {
      expect(RestClient.create).toBeCalled();
      return wrapper.vm.$nextTick().then(done);
    });
 });
});

我直接在模式上发出ok 事件。 然后我正在查看要执行的保存方法中的 console.log 语句，在执行测试时我在终端中看不到。

因此，RestClient.create-方法没有被调用。 为什么？

Answer 1

@ok 是自定义的 Vue 事件，而不是原生浏览器 DOM 事件。 .prevent 修饰符不适用于自定义 Vue 事件。