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()
    })

测试输出

错误：期望（jest.fn（））。toBeCalled（）

预期通话次数：> = 1已接来电数量：0

Answer 1

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

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

分配给v-select的项目列表中是否恰好包含1、2和3这三个元素？
此组件是否具有称为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团队已经完成了他们的工作。：-）

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

1 个答案: