如何使用vue-test-utils测试CSS Framework自定义组件

Question

我正在使用Buefy CSS Framework，它提供了自定义的vue-js组件，如<b-input>和<b-table> ，我遇到了测试<b-input>标签的问题。

 import { shallowMount, createLocalVue } from '@vue/test-utils' import BInputPractice from '../BInputPractice.vue' import Buefy from 'buefy' const localVue = createLocalVue() localVue.use(Buefy) describe('b-input Practice', () => { it('updates the name data property', () => { const wrapper = shallowMount(BInputPractice, { localVue, stubs: { 'b-input': Buefy.Input } }) const input = wrapper.find('input') input.element.value = 'a name' input.trigger('input') expect(wrapper.vm.name).toBe('a name') }) }) 

 <!-- BInputPractice.vue --> <template> <div> <b-input v-model="name"></b-input> <!-- <input v-model="name"> --> </div> </template> <script> export default { data() { return { name: '' } } } </script> 

当我使用<input>标签而不是<b-input>时，我的测试代码中的expect语句应该通过。 但是，触发<b-input>上的“input”事件对name数据属性没有任何作用。

有谁知道我如何正确地存根<b-input>标签，以便我可以完全作为<input>标签进行测试？

Answer 1

我希望这会有所帮助。 我意识到，当存根时，组件的名称会更改，并且-stub会添加-stub 。

因此，如果你使用b-input那么在使用时它将被称为b-input-stub ：

const wrapper = shallowMount(BInputPractice, { stubs: ['b-input'] })

我不需要同时使用localView和stubs 。 您还可以使用setData（data）来设置组件的数据。

expect(wrapper.find('b-input-stub').exists()).toBeTruthy() 
wrapper.setData({ name: 'a name' })
expect(wrapper.vm.name).toEqual('a name')

这里不需要启动trigger('input') ，因为你没有像在模板中那样在b-input指定要做@input.native事情：

<b-input @input.native="updateName" v-model="name"> </b-input>

并在脚本中的导出默认值内。

methods: {
    updateName: function () {
      this.$emit('nameUpdate', this.name)
    }
  }

但是要设置和验证自定义组件的值，比如b-input ，我会参考vuejs / vue-test-utils 。