vue.js - 我如何从 vuejs3 中的设置中监视函数？

Question

我在 setup() 的组件中有一个函数:

export default defineComponent({
  setup() {
    const handleResume = async () => {
      msg.value = {}
      try {
      } catch (err) {
      }
    }
    return { handleResume }
  }
})

现在在我的测试中，我想创建一个像这样的 spy 函数:

import App from '@/views/Frame'
jest.spyOn(App, 'handleResume')

但是我收到了这个错误:

Cannot spy the handleResume property because it is not a function; undefined given instead

Answer 1

这需要 Vue 3.2.31 (昨天发布)，其中添加了 support for mocking Proxy methods , 在 wrapper.vm from @vue/test-utils 上启用 spy .

您可以公开来自 setup() 的方法(或其他数据)与 expose property from the context argument .例如，此组件公开了 handleResume仅在测试中:

<!-- MyComponent.vue -->
<script>
import { defineComponent } from 'vue'

export default defineComponent({
                   👇
  setup(props, { expose }) {
    const handleResume = async () => true

    if (process.env.NODE_ENV === 'test') {
        👇
      expose({ handleResume })
    }

    return { handleResume }
  }
})
</script>

<template>
  <button @click="handleResume">Click</button>
</template>

如果你有<script setup>相反，使用 defineExpose() macro :

<!-- MyComponent.vue -->
<script setup>
const handleResume = async () => true

if (process.env.NODE_ENV === 'test') {
       👇
  defineExpose({ handleResume })
}
</script>

然后监视暴露的handleResume来自 wrapper.vm :

// MyComponent.spec.js
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('handles resume', async () => {
    const wrapper = shallowMount(MyComponent)
                                         👇
    const handleResume = jest.spyOn(wrapper.vm, 'handleResume')

    await wrapper.find('button').trigger('click')
    expect(handleResume).toHaveBeenCalled()
  })
})

demo