gpt4 book ai didi

vue.js - 单击事件的 Jest 'toHaveBeenCalled' 仅在单击两次后才有效? (测试 Vue 应用程序)

转载 作者:搜寻专家 更新时间:2023-10-30 22:41:43 27 4
gpt4 key购买 nike

一个简单的组件:

<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 测试实用程序 setMethod方法:

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

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

expect(clickMethodStub.called).toBe(true)

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

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

关于vue.js - 单击事件的 Jest 'toHaveBeenCalled' 仅在单击两次后才有效? (测试 Vue 应用程序),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53326620/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com