Jestjs 如何使我的vue单元测试在Vuetify中的v-btn上触发单击事件？

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

我用文档作为测试的基础：

我还尝试了这里提到的一些建议：

但我好像错过了什么，有人能帮我吗

我的测试：

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)

    })

myComponent：

<template>

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

<template>

<script>
methods: {

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

试验
方法：{
方法测试（）{
console.log（'单击按钮！'）
}

希望对您有所帮助，我对您的HTML进行了一些更改

• 首先，我添加了一个
  ，并将
  放在里面，这非常有用 重要的
• 其次，我声明了一个名为

  index

  的数据属性，它是 在

  1

  中初始化
• 第三，我使用

  data testid=“button”

  来识别 并在测试过程中找到它

现在，当您进行单元测试时，您应该检查输入和输出。在这种情况下，您的输入是click事件，您的输出不是您的方法被调用，而是通过此方法修改或发送的数据。这就是为什么我声明

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.

---

这是我的第一篇博文，顺便说一句，尝试在button.trigger（'click'）之后调用wait wait wrapper.vm.$nextTick（）@Anatoly我尝试了你的建议，但仍然收到一个错误：“expect（jest.fn（））.toHaveBeenCalledTimes（expected）预期呼叫次数：1收到呼叫次数：0”：/try button.vm.$on（'v-btn:clicked'，event）而不是wrapper.vm.$on（'v-btn:clicked'，event）try button.vm.$emit（'click'）-此github问题有关于此的更多信息

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.