如何让我的 vue-unit-test 在 Vuetify 中触发 v-btn 上的点击事件？答案

【问题标题】：How do I make my vue-unit-test trigger a click event on v-btn in Vuetify?如何让我的 vue-unit-test 在 Vuetify 中触发 v-btn 上的点击事件？
【发布时间】：2021-03-13 03:23:01
【问题描述】：

我正在为我的组件创建一些单元测试，但测试一直失败，因为我正在测试的按钮一直没有被点击事件触发。

我使用文档作为测试的基础：https://vuetifyjs.com/sv-SE/getting-started/unit-testing/

我也尝试了这里提到的一些建议：https://forum.vuejs.org/t/how-to-trigger-an-onchange-event/11081/4

但我好像错过了什么，谁能帮帮我？

我的测试：

test('If you can click on the Test button', () => {
        const wrapper = shallowMount(myComponent, {
            localVue,
            vuetify,

        });

        const event = jest.fn();
        const button = wrapper.find({name: 'v-btn'})

        expect(button.exists()).toBe(true) //this works

         wrapper.vm.$on('v-btn:clicked', event)

        expect(event).toHaveBeenCalledTimes(0)

         button.trigger('click')

         expect(event).toHaveBeenCalledTimes(1)

    })

我的组件：

<template>

<v-btn class="primary-text" @click.native="methodForTesting($event)">Test</v-btn>

<template>

<script>
methods: {

methodForTesting(){
  console.log('button clicked!')
}
</script>

【问题讨论】：

尝试在button.trigger('click')之后调用await wrapper.vm.$nextTick()
@Anatoly 我尝试了你的建议，但我仍然收到一条错误消息：“expect(jest.fn()).toHaveBeenCalledTimes(expected) 预期的通话次数：1 收到的通话次数：0” ://
尝试 button.vm.$on('v-btn:clicked', event) 而不是 wrapper.vm.$on('v-btn:clicked', event)
试试 button.vm.$emit('click') - 这个 github 问题有更多关于这个github.com/vuejs/vue-test-utils/issues/919的信息

标签： jestjs vuetify.js vue-test-utils

【解决方案1】：

希望对您有所帮助，我稍微更改了您的 HTML。

首先，我添加了一个<div>，并在里面放了<v-btn>，这个很很重要。
其次，我声明了一个名为index 的数据道具，它是在1 中初始化。
第三，我用data-testid="button"来识别并在测试过程中找到它。

<template>
  <div>
    <v-btn data-testid="button" class="primary-text" @click="methodForTesting">Test</v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 1
    };
  },
  methods: {
    methodForTesting() {
      this.index++;
    }
  }
};
</script>

现在，进行单元测试。

关键是使用vm.$emit('click') 而不是.trigger('click')，因为v-btn 是Vuetify 的一个组件。如果您使用的是button 标签，那么您可以使用.trigger('click')。另外，我更改了 jest 查找此按钮的方式。

import Vuetify from 'vuetify'

// Utilities
import { mount, createLocalVue } from '@vue/test-utils'

// Components
import Test from '@/views/Test.vue';

// VARIABLES INITIALIZATION //
const vuetify = new Vuetify()
const localVue = createLocalVue()

// TESTING SECTION //
describe('Testing v-btn component', () => {
  it('should trigger methodForTesting', async () => {
    const wrapper = mount(Test, {
      localVue,
      vuetify,
    })
    const button = wrapper.find('[data-testid="button"]')

    expect(button.exists()).toBe(true)
    expect(wrapper.vm.$data.index).toBe(1)
    button.vm.$emit('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.vm.$data.index).toBe(2)
  })
})

现在，当您进行单元测试时，您应该检查输入和输出。在这种情况下，您的输入是点击事件，而您的输出，不是您的方法被调用，而是该方法修改或发送的数据。这就是为什么我声明index 以查看单击按钮时它是否会发生变化。

无论如何，如果你想检查你的方法是否被调用，你可以使用这段代码来代替

describe('Testing v-btn component', () => {
  it('should trigger methodForTesting', async () => {
    const methodForTesting = jest.fn()
    const wrapper = mount(Test, {
      localVue,
      vuetify,
      methods: {
        methodForTesting
      }
    })
    const button = wrapper.find('[data-testid="button"]')

    expect(button.exists()).toBe(true)
    expect(methodForTesting).toHaveBeenCalledTimes(0)
    button.vm.$emit('click')
    await wrapper.vm.$nextTick()
    expect(methodForTesting).toHaveBeenCalledTimes(1)
  })
})

但是你会收到下一个错误：

[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in the next major version. There is no clear migration path for the `methods` property - Vue does not support arbitrarily 
replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

这是我的第一篇文章

【讨论】：