'Error in vue-test-utils with call component method by ref
I'm trying to test a component that uses vue-multiselect. The component has a button that clears the options selection and causes the select to close via a method call toggle(). This all works in the application itself, but when testing this method, the test gives an error associated with calling this method toggle().
<button class="btn-unselect-all small-button" type="button" @click="cleanSelect">{{ $t("students.clear") }}</button>
cleanSelect: function (){
this.$emit('cleanSelectInstitutes', [])
this.$refs.multiselectInstitutes.toggle();
},
import {config, mount} from "@vue/test-utils"
import FiltersByStudents from '../../assets/src/components/FiltersByStudents'
import Multiselect from 'vue-multiselect';
import translations from "../../assets/src/common-resources/translations/translations"
const locale = "uk";
config.mocks["$t"] = msg => translations[locale][msg]
describe('testing students filters methods', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(FiltersByStudents, {
propsData: {
filters: {
"optionsInstitutes": [
{
"id": 1,
"name": "VNZ 1"
},
{
"id": 2,
"name": "VNZ 2"
},
],
"optionsStudents": [
{
"type": 0,
"name": "All"
},
{
"type": 1,
"name": "Authorized"
},
{
"type": 2,
"name": "Not Authorized"
}
],
"selectedInstitutes": [],
"selectedStudents": [],
"fio": "",
"cardNumber": ""
},
currentPage: 1,
fnSearchStudents: jest.fn()
},
stubs: ['Multiselect']
})
});
test('call method clear options and close select', async () => {
let btnClearSelect = wrapper.find('.btn-unselect-all')
await btnClearSelect.trigger('click')
expect(wrapper.emitted().cleanSelectInstitutes[0]).toEqual([[]])
})
})
Test passed by in console I get error
I will be grateful for any help because I am at a dead end.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

