点击事件的“toHaveBeenCalled”仅在两次点击后才有效？（测试一个 Vue 应用程序）答案

【问题标题】：Jest 'toHaveBeenCalled' for click events only works after two clicks? (Testing a Vue app)点击事件的“toHaveBeenCalled”仅在两次点击后才有效？（测试一个 Vue 应用程序）
【发布时间】：2019-04-18 23:29:30
【问题描述】：

一个简单的组件：

<template>
  <div>
    <p>
      {{ count }}
    </p>
    <button @click="increment" data-test="increment">Increment</button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      increment () {
        this.count++
      }
    }
  }
</script>

我的测试：

import TestExperiment from '@/components/TestExperiment'
import { createLocalVue, shallowMount } from '@vue/test-utils'

const localVue = createLocalVue()

describe('testexperiment.test.js', () => {
  const cmp = shallowMount(TestExperiment, {
    localVue
  })

  const increment = jest.spyOn(cmp.vm, 'increment')
  const incrementButton= cmp.find('[data-test="increment"]')

  test('clicking increment button calls increent', () => {

    expect(incrementButton.exists()).toBe(true)

    incrementButton.trigger('click')

    // Checking call here fails:
    // expect(increment).toHaveBeenCalled()

    // Function was still obviously called
    expect(cmp.vm.count).toBe(1)

    incrementButton.trigger('click')

    // Checking call here passes:
    expect(increment).toHaveBeenCalled()
  })

})

如您所见，我触发了对 incrementButton 的点击两次。

第一次调用后，如果我测试是否调用了方法“increment”，它会返回 false。但是，计数确实增加了。在第二次调用之后，它记录了它实际上被调用了（如果我测试它被调用了多少次，它断言它被调用了一次，即使 count 是 2，显然已经增加了两次）。

关于 Jest/Vue 的工作原理，我缺少什么？

【问题讨论】：

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

【解决方案1】：

你需要使用 Vue Test Utils setMethod 方法：

const wrapper = mount(Foo)
const clickMethodStub = sinon.stub()

wrapper.setMethods({ clickMethod: clickMethodStub })
wrapper.find('button').trigger('click')

expect(clickMethodStub.called).toBe(true)

它在您的示例中不起作用的原因是因为您调度点击的元素具有组件在实例化时创建的原始处理程序。

它在两次调用 trigger 后工作，因为初始调用会导致重新渲染，并且修补后的元素已更新其处理程序以使用您添加到实例的存根方法。

【讨论】：

值得指出的是，setMethods 现在已被弃用。