我正在使用 Composition API 和 setup()
Hook 运行 vue3 应用程序。
我使用 Vitest 作为单元测试框架。 (v 0.6.1)
我有以下示例组件:
// src/components/MyComponent.vue
<template>
<div>
<h1>counter : {{ counter }}</h1>
<button
@click="incrementCounter"
>
Click
</button>
</div>
</template>
<script setup lang="ts">
// imports
import { ref } from 'vue'
// datas
const counter = ref(1)
// methods
const incrementCounter = () => {
if (confirm()) { // call the confirm method
counter.value++ // increment counter by 1
}
}
const confirm = () => {
return true
}
</script>
及其测试文件:
// src/components/MyComponent.spec.ts
import {
shallowMount
} from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
describe('component/MyComponent.vue', () => {
it('incrementCounter method', () => {
const wrapper = shallowMount(MyComponent) // create the wrapper
const confirmSpy = vi.spyOn(wrapper.vm, 'confirm') // create the confirm method spy
wrapper.vm.incrementCounter() // use the incrementCounter method
expect(wrapper.vm.counter).toBe(2) // test passed
expect(confirmSpy).toHaveBeenCalled() // test failed
})
})
测试的目的只是验证confirm()
方法是否在incrementCounter()
方法中被调用。
我尝试使用 vitest tohavebeencalled()方法与 confirm()
方法的 spy ,但测试以失败告终,并显示以下消息:
Re-running tests... [ src/components/MyComponent.spec.ts ]
× src/components/MyComponent.spec.ts > component/MyComponent.vue > incrementCounter method → expected "confirm" to be called at least once
⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
FAIL src/components/MyComponent.spec.ts > component/MyComponent.vue
incrementCounter method AssertionError: expected "confirm" to be called at least once ❯ src/components/MyComponent.spec.ts:13:23 11| wrapper.vm.incrementCounter() // use the incrementCounter method 12| expect(wrapper.vm.counter).toBe(2) // test passed 13| expect(confirmSpy).toHaveBeenCalled() // test failed | ^ 14| }) 15| })
这似乎表明confirm()
方法没有被调用,但由于计数器值已经增加到2,我想这意味着该方法实际上已经被有效调用了。
我使用的 spyOn()
方法错了吗?我应该怎么做才能通过这个测试?
预先感谢您的帮助。
最佳答案
在这种情况下,对 confirm
的引用在 incrementCounter()
不能从外部修改。这就像修改函数的私有(private)变量一样不可能。
这是一个类似的 vanilla JavaScript 示例,演示了 <script setup>
中的代码正在尝试(运行下面的代码片段进行演示):
function setup() {
const incrementCounter = () => {
confirm()
}
const confirm = () => {
console.log('confirm')
}
return {
incrementCounter,
confirm,
}
}
const comp = setup()
comp.incrementCounter()
console.log('trying to update confirm...')
comp.confirm = () => console.log('Yes do it!')
comp.incrementCounter() // ❌ still calls original confirm
但是,对象的属性可以从外部修改。因此,解决方法是更新 incrementCounter()
引用confirm
通过对象,稍后我们将对其进行更新:
function setup() {
const incrementCounter = () => {
/*👇*/
ctx.confirm()
}
const confirm = () => {
console.log('confirm')
}
/*👇*/
const ctx = {
incrementCounter,
confirm,
} /*👇*/
return ctx
}
const comp = setup()
comp.incrementCounter()
console.log('trying to update confirm...')
comp.confirm = () => console.log('Yes do it!')
comp.incrementCounter() // ✅ calls new confirm above
使用相同的技术,incrementCounter()
可以引用confirm
通过 <script setup>
中的对象:
<!-- MyComponent.vue -->
<script setup>
import { ref } from 'vue'
const counter = ref(1)
const incrementCounter = () => {
/*👇*/
if (ctx.confirm()) {
// call the confirm method
counter.value++ // increment counter by 1
}
}
const confirm = () => {
return true
}
/*👇*/
const ctx = {
confirm
}
</script>
现在,您可以使用 spyOn
在 ctx.confirm
:
// MyComponent.spec.js
import { describe, it, expect, vi } from 'vitest'
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
describe('component/MyComponent.vue', () => {
it('incrementCounter method', () => {
const wrapper = shallowMount(MyComponent)
/*👇*/
const confirmSpy = vi.spyOn(wrapper.vm.ctx, 'confirm')
wrapper.vm.incrementCounter()
expect(wrapper.vm.counter).toBe(2)
expect(confirmSpy).toHaveBeenCalled() /*✅*/
})
})
关于javascript - Vue3-使用 Vitest toHaveBeenCalled() 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72084274/