单元测试Vuetify v-select @change事件？

Question

无法编写测试 Vuetify v-select @change 事件的测试。事件处理程序select_change 不在测试内部调用。

Demo.vue

    <div>
        <v-select @change="select_change" :items="[1,2,3]" v-model="value"></v-select>
    </div>

    export default {
        data() {
            return {
                value: 1,
            }
        },
        methods: {
            select_change() {
                console.log('inside select_change')
            }
        }
    }

Demo.vue.test.js

    it('v-select@change', () => {
        wrapper = mount(Demo, {
            vuetify: new Vuetify
        })
        wrapper.setMethods({
            select_change: jest.fn(),
        })
        wrapper.find('.v-select').trigger('change', /* {value: 2} */)
        expect(wrapper.vm.select_change).toBeCalled()
    })

测试输出

错误：expect(jest.fn()).toBeCalled()

预期来电数：>= 1 已接来电数：0

Answer 1

这可能不是您想要的答案，但测试<v-select> 组件的@change 事件不是您的工作。此组件的单元测试中的 event is already tested by the Vuetify team。 FWIW，人们想要编写像您描述的那样的测试是相当普遍的。

但是，您的工作是确保 您的 组件（包装 v-select 的组件）定义了适当的接口/合同，并遵守它.您可以合理测试的一些示例：

1. 分配给v-select 的项目列表是否恰好包含三个元素，即 1、2 和 3？
2. 此组件是否有一个名为select_change() 的方法，并且该函数是否返回给定输入的预期值？ （顺便说一句，您的 select_change() 方法目前不返回 任何 值，因此难以测试）

您的测试可能类似于：

import { createLocalVue, mount } from '@vue/test-utils'
import Vue from 'vue'
import Vuetify from 'vuetify'
import Demo from '@/components/Demo'

Vue.use(Vuetify)
const vuetify = new Vuetify()
const localVue = createLocalVue()

describe('A Demo component', () => {
  it('has a `v-select` with 3 items: [1, 2, 3]', () => {
    const wrapper = mount(Demo, { localVue, vuetify })
    const items = wrapper.find('.v-select').props('items')
    expect(items.length).toBe(3)
    expect(items).toStrictEqual([1, 2, 3])
  })

  it('has item 1 selected by default', () => {
    const wrapper = mount(Demo, { localVue, vuetify })
    expect(wrapper.find('.v-select').props('value')).toBe(1)
  })
})

尽管想要测试 v-select 组件的底层功能可能很诱人，但您必须相信 Vuetify 团队完成了他们的工作。 :-)