vue.js test-utils Why my onSubmit function mock is not called? - vue.js

Question

I am trying to test the submit form event using the following spec file :
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);
});
});
But this test does not pass ...
console.log
✕ submit valid form when click submit (157ms)
● ContactForm.vue › submit valid form when click submit
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
Here is the component vue to be tested
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>
Feedback welcome ...

Answer 1

SOLVED ...
change the form tag
remove the mocks: block in shallowMount() and use setMethods() to replace the sendMessage() with the sendMessageMock()
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();
const options = {
sync: false,
store,
provide: () => ({
$validator: v
}),
i18n
};
// when
wrapper = shallowMount(ContactForm, options);
wrapper.setMethods({ sendMessage: sendMessageMock });
const contactForm = wrapper.find('#contactForm');
// when
contactForm.trigger('submit.prevent');
// then
expect(sendMessageMock).toBeCalled();
});