javascript - Vue3-使用 Vitest toHaveBeenCalled() 方法

Question

我正在使用 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 leastonce

⎯⎯⎯⎯⎯⎯⎯ 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:2311| wrapper.vm.incrementCounter() // use the incrementCounter method12| expect(wrapper.vm.counter).toBe(2) // test passed13| expect(confirmSpy).toHaveBeenCalled() // test failed| ^14| })15| })

这似乎表明confirm()方法没有被调用，但由于计数器值已经增加到2，我想这意味着该方法实际上已经被有效调用了。

我使用的 spyOn() 方法错了吗？我应该怎么做才能通过这个测试？

预先感谢您的帮助。

Answer 1

在这种情况下，对 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() /*✅*/
  })
})

demo