vue.js - vue.js test-utils onSubmit 関数のモックが呼び出されないのはなぜですか?

Question

次の仕様ファイルを使用してフォーム送信イベントをテストしようとしています:

ContactForm.spec.js

import Vue from "vue";
import Vuex from "vuex";
import { storeMock } from "./mocks.js";
import VeeValidate from "vee-validate";

import i18n from "@/locales";
import Vuetify from "vuetify";

import { mount, shallowMount } from "@vue/test-utils";
import ContactForm from "@/components/Home/ContactForm.vue";

Vue.use(Vuex);
Vue.use(VeeValidate, { errorBagName: "errors" });
Vue.use(Vuetify);

describe("ContactForm.vue", () => {
  let wrapper;
  let store = new Vuex.Store(storeMock);

  const v = new VeeValidate.Validator();

  beforeEach(() => {
    const el = document.createElement("div");
    el.setAttribute("data-app", true);
    document.body.appendChild(el);
  });

  it("submit valid form when click submit", async () => {
    // given
    const getters = {
        language: () => {
          return "fr";
        },
        "authentication/loading": () => {
          return false;
        }
      },
    store = new Vuex.Store({ getters });

    // const sendMessageMock = jest.fn( () => Promise.resolve() );
    const sendMessageMock = jest.fn();
    const options = {
      sync: false,
      store,
      provide: () => ({
        $validator: v
      }),
      i18n,
      mocks : {
        sendMessage: sendMessageMock
      }
    };
    // when
    wrapper = shallowMount(ContactForm, options);
    const contactForm = wrapper.find('#contactForm');
    const submitBtn= wrapper.find('#btnSend');
    // console.log(contactForm.html());
    // when
    contactForm.trigger('submit.prevent');
    // then
    expect(sendMessageMock.called).toBe(true);
  });
});

しかし、このテストは合格しません...

console.log

✕ submit valid form when click submit (157ms)

● ContactForm.vue › [送信] をクリックしたときに有効なフォームを送信する

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: undefined

Difference:

  Comparing two different types of values. Expected boolean but received undefined.

  77 |     contactForm.trigger('submit.prevent');
  78 |     // then
> 79 |     expect(sendMessageMock.called).toBe(true);
     |                                    ^
  80 |   });
  81 | });
  82 |

  at Object.toBe (tests/unit/ContactForm.spec.js:79:36)
  at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
  at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:296:22)
  at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
  at step (node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:10:30)
  at _next (node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:25:9)
  at node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:32:7

テストするコンポーネントのビューは次のとおりです

ContactForm.vue

<template>
  <form id="contactForm" onSubmit="sendMessage">
    <input v-model="language" type='hidden' name='locale'>
    <v-layout row wrap align-center>
        .../...
    </v-layout>
    <v-text-field
        .../...
    </v-text-field>
    <v-textarea .../... ></v-textarea>
    <v-btn round @click="clear">.../...</v-btn>
    <v-btn id="btnSend" round large color="primary" type="submit">Submit</v-btn>
  </form>
</template>

<script>
import { mapGetters } from "vuex";
.../...
import router from "@/router";

export default {
  name: "contactForm",
  data() {
    return {
         .../...
    };
  },
  computed: {
    ...mapGetters(["language"]),
    ...mapGetters("authentication", ["loading"]),
    honorificPrefix: function() {
        .../...
    }
  },
  watch: {
    language(newLanguage) {
          .../...
    }
  },
  methods: {
    setPrefix: function(value) {
          .../...
    },
    sendMessage: function() {
        .../...
    },
    clear: function() {
        .../...
    }
  },
  mounted() {
      .../...
  }
};
</script>

フィードバック歓迎...