Vue test-utils for bootstrap form inputs - vue.js

Question

I am writing a test case for my form component that incorporates custom inputs such as b-form-input, the Model Select component from the vue-search-select library, and the vuelidate validator. I encountered an issue at the outset of my efforts, specifically in regards to setting values in the input fields. I encountered the errors, setValue cannot be called on the selected element and Selecting an empty wrap.
Packages:
"vue": "^2.6.14",
"bootstrap": "^4.6.1",
"bootstrap-vue": "^2.21.2",
"nuxt": "^2.15.8",
"vuelidate": "^0.7.7",
"vue-search-select": "^2.9.5",
The following is a code snippet of my form component:
<template>
<b-form ref="project_form" #submit.prevent="submitForm">
<b-form-group id="name" label="Name" label-for="name">
<b-form-input
ref="name"
id="name"
:class="{
'is-invalid': $v.formData_project.name.$error,
'is-valid': !$v.formData_project.name.$invalid,
}"
placeholder="Project Name"
v-model="formData_project.name"
class="name col-md-12"
>
</b-form-input>
<div class="invalid-feedback" v-if="!$v.formData_project.name.required">
name is required
</div>
<div
class="invalid-feedback"
v-if="
!$v.formData_project.name.isUnique &&
$v.formData_project.name.required
"
>
name already existed
</div>
<div v-if="!$v.formData_project.name.maxLength">
Name should be less than 30 characters
</div>
</b-form-group>
<model-select
:options="options"
v-model="formData_project.country"
placeholder="select item"
id="country"
:class="{
'is-invalid': $v.formData_project.country.$error,
'is-valid': !$v.formData_project.country.$invalid,
}"
>
</model-select>
</template>
and for the test:
import axios from "axios";
import { mount } from "#vue/test-utils";
import createProject from "../components/site-components/modals/createProject.vue";
import { BForm } from 'bootstrap-vue'
import Vue from "vue";
Vue.component('b-form', BForm)
Vue.component('b-form-group',BForm)
Vue.component('b-form-input',BForm)
Vue.component('b-form-textarea',BForm)
Vue.component('b-button',BForm)
jest.mock("axios");
describe("Form", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(createProject);//,{stubs: {BForm}}
const html = wrapper.html();
});
it("should make a POST request to the API when form is submitted", async () => {
// Fill in form inputs
// console.log(wrapper.findComponent({ ref: 'project_form' }))
// console.log(wrapper.find({ ref: 'name' }).find('#name'))
wrapper.find('input[id="name"]').setValue('test1')
wrapper.find("#latitude").setValue(50);
wrapper.find("#longitude").setValue(100);
wrapper.find("#country").setValue("United States");
wrapper.find("#company").setValue("Test Company");
// Mock success response from API
axios.post.mockResolvedValue({ data: { success: true } });
// Submit the form
wrapper.find("b-form").trigger("submit");
// Wait for next tick to allow axios call to be made
await wrapper.vm.$nextTick();
// Check that the API was called with the correct data
expect(axios.post).toHaveBeenCalledWith(
"http://127.0.0.1:5000/api/projects/",
{
name: "Test Project",
latitude: 50,
longitude: 100,
country: "United States",
company: "Test Company",
}
);
});
});
I also tried
describe("Form", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(createProject,{stubs: {BForm}});//
const html = wrapper.html();
});
it("should make a POST request to the API when form is submitted", async () => {
// Fill in form inputs
wrapper.find('#name').setValue('test1')
Thanks for answering in advance.
Similar topics that I have gone through:
https://github.com/vuejs/vue-test-utils/issues/1883
https://github.com/vuejs/vue-test-utils/issues/957
but none of the solutions solved my problem.