vue.js - 点击事件的“toHaveBeenCalled”仅在两次点击后才有效?(测试一个 Vue 应用程序)
问题描述
一个简单的组件:
<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 的两次点击。
在第一次调用之后,如果我测试是否调用了“增量”方法,它会返回 false。但是,计数确实增加了。在第二次调用之后,它记录了它实际上被调用了(如果我测试它被调用了多少次,它断言它被调用了一次,即使 count 是 2,显然已经增加了两次)。
关于 Jest/Vue 如何工作,我缺少什么?
解决方案
您需要使用 Vue Test UtilssetMethod
方法:
const wrapper = mount(Foo)
const clickMethodStub = sinon.stub()
wrapper.setMethods({ clickMethod: clickMethodStub })
wrapper.find('button').trigger('click')
expect(clickMethodStub.called).toBe(true)
它在您的示例中不起作用的原因是因为您分派单击的元素具有组件在实例化时创建的原始处理程序。
它在两次调用后起作用,trigger
因为初始调用会导致重新渲染,并且修补元素的处理程序已更新为使用您添加到实例的存根方法。
推荐阅读
- css - 如何限制 ::selection 选择器?
- c++ - 如何创建一个自定义类类型的数组,每个都包含该类?
- python - 在 python selenium 中检查网页上是否加载了 web 元素
- c++ - 为什么 g++ 10.1 抱怨头文件中的命名 lambda 而其他人没有?
- python - http post发送错误的数据
- oauth-2.0 - OpenIDConnect 认证信赖方服务器与认证 OpenID 提供者服务器
- c# - REST API 不会触发 DelegatingHandler,只有 swagger 会
- c++ - 如何将默认代码添加到我在 vim 中打开的每个 cpp 文件?
- swift - 为什么没有 http 或 https 的 URL 不能在 webkit 中打开
- stored-procedures - 使用存储过程 postgresql 中的索引从 jsonb[] 中删除特定对象