How to test CSS Framework custom components with vue-test-utils
I hope this will help a bit. I realised that when stubbed, a component's name change and -stub is added at the end.
So if you stub b-input it will be called b-input-stub when using:
const wrapper = shallowMount(BInputPractice, { stubs: ['b-input'] })I don't thing you need to use localView and stubs at the same time. Also you can use the setData(data) to set the data of a component.
expect(wrapper.find('b-input-stub').exists()).toBeTruthy() wrapper.setData({ name: 'a name' })expect(wrapper.vm.name).toEqual('a name')Here the trigger('input') does not need to be launched because you didn't specify something to do @input.native in the b-input like in the template:
<b-input @input.native="updateName" v-model="name"> </b-input>And inside the export default in your script.
methods: { updateName: function () { this.$emit('nameUpdate', this.name) } }However to set and validate the value of custom components like b-input, I would refer to vuejs/vue-test-utils.