Jest单元测试在使用V​​ue3脚本设置语法时找不到组件函数（wrapper.vm 属性 does not exist on type）

Question

我开始使用Vue3的SFC脚本设置语法：https://vuejs.org/api/sfc-script-setup.html

当我尝试为这些组件编写单元测试时，Intellisense 抱怨这些组件中声明的函数不存在。

错误在 wrapper.vm

Property 'functionName' does not exist on type

我的问题是我是否缺少可以解决此问题的软件包或工具？

我可以将 wrapper.vm 转换为 any 来解决问题，但它并不理想...

我在下面添加了更多详细信息：

我可以 运行 单元测试，它会成功通过，但是如果我尝试构建项目，我会收到错误消息。

下面是我的一些相关包package.json

"@vue/vue3-jest": "^27.0.0-alpha.4",
"jest": "^27.4.7",
"jest-serializer-vue": "^2.0.2",
"ts-jest": "^27.1.3",
"vite-jest": "^0.1.4",
"vue-jest": "^5.0.0-alpha.10",
"babel-jest": "^27.4.6",
"vue3-jest": "^27.0.0-alpha.1"
"vue": "^3.0.5",
"vue-tsc": "^0.28.7",
"vite": "^2.4.4",

示例组件：

<script setup lang="ts">
const msg = 'Click me'
function click(): string {
  return 'clicked'
}
</script>

<template>
  <button @click="click">{{ msg }}</button>
</template>

示例测试：

import { shallowMount } from '@vue/test-utils'

import Test from './Test.vue'

describe('Test', () => {
  const wrapper = shallowMount(Test)

  test('Component Renders', () => {
    expect(wrapper.exists()).toBeTruthy()
  })

  describe('click method', () => {
    test(`to return 'clicked'`, () => {
      expect(wrapper.vm.click()).toEqual('clicked')
    })
  })
})

这里有一个将包装器强制转换为 any 来解决问题的示例，但这是我想避免的事情。

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const wrapper: any = shallowMount(Test)

Answer 1

<script setup> 默认关闭，所以 click 需要显式 exposed 与 defineExpose() macro:

<script setup lang="ts">
function click(): string {
  return 'clicked'
}
   
defineExpose({ click })
</script>

公开 click 也使其在包装器 vm 实例的类型上可用。