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

Question

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

我使用这些文档作为测试的基础：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>

Answer 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.

顺便说一句，这是我的第一篇文章