时间戳

首页 > 解决方案 > 单元测试Vuetify v-select @change事件？

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

问题描述

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

演示.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')
            }
        }
    }

演示.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

标签： javascriptvue.jsvuetify.jsvue-test-utils

解决方案

这可能不是您想要的答案，但测试组件的事件不是您的工作。此事件已由 Vuetify 团队在此组件的单元测试中进行测试。FWIW，人们想要编写像您描述的那样的测试是相当普遍的。<v-select>@change

然而，你的工作是确保你的组件（包装 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 团队完成了他们的工作。:-)

推荐阅读