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

Posted 2023-02-22

【中文标题】单元测试Vuetify v-select @change事件？

【英文标题】：Unit Test Vuetify v-select @change event?

【发布时间】：2020-07-13 21:46:25

【问题描述】：

无法编写测试 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

【参考方案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 团队完成了他们的工作。 :-)

【讨论】：

不同意。我需要休息一下这个场景：1）用户选择区域设置 2）选择触发事件 3）正确的事件处理程序执行。这是常见的测试。官方 vie-test-utils 和 vuetify 文档中存在许多相同的测试，除了它们都是关于 button@click 事件，而不是 select@change

From the docs: "我们建议编写测试来断言组件的公共接口，并将其内部视为黑盒子" A v-select 触发事件是内部 Vuetify 的 VSelect 组件，因此超出了您应该测试的范围。您可以并且应该测试以下内容：1) 您是否有可供选择的语言环境的完整列表，以及 2) 给定一些输入，您的事件处理程序是否符合预期。

写完之后的一段：例如，对于每次单击按钮时显示计数器加 1 的 Counter 组件，它的测试用例会模拟单击并断言渲染的输出增加了由 1. 和许多按钮单击下面的模拟测试。所以你可以看到 vue 创造者并没有考虑将按钮点击模拟为组件的内部。按钮@click===select@change。对吗？

关键区别在于，在示例中，您正在测试一个您直接实现的按钮。您没有将其他人的按钮包装在您自己的组件中。在您的示例中，您将 Vuetify 的 v-select 包装在您自己的组件中，因此还有一层额外的嵌套。这是一个微妙但重要的区别。

再次感谢您的光临。真的，我看不出文档的示例和我的代码之间有什么区别。再次查看此代码。从我的角度来看，它完全相等 // counter.js vue-test-utils.vuejs.org/guides/#getting-started 在示例中，我们看到 div 内的按钮。在我的代码中，我们在 div 中看到 v-select。 v-select，按钮或任何其他组件应该无关紧要。它们都发出事件。