使用 TypeScript SFC 测试 vue3 计算属性

Question

我正在尝试使用vitest编写一个测试，以断言使用script setup定义的 vue3 组件中的计算属性。

考虑一个简单的组件：

// simple.vue
<script lang="ts" setup>
import { computed } from 'vue';

const hello = computed((): string => {
  return 'Hello';
});
</script>

<template>
  {{ hello }}
</template>

我的测试是这样的：

describe('Hello', () => {
  it('should compute hello', () => {
    const wrapper = mount(Hello);
    expect(wrapper.vm.hello).toBe('Hello');
  });
});

当使用 运行时，该测试实际上按预期工作vitest，因此功能上似乎运行良好。

但是，VSCode 无法看到对象的计算属性vm：

它能够看到普通属性（例如，用defineProps宏定义的属性）。这只是 VSCode 特定工具的问题，还是我应该通过其他方法来测试 vue3 组件中的计算属性？

如果这是首选方法，是否有办法引入计算属性的类型（类似于引入定义的 props 的类型）？

我已经尝试过Vue 测试手册中描述的技术，但这根本不起作用，我认为它一定是特定于 vue2 的。

Answer 1

来自Vue 文档：

默认情况下，使用的组件<script setup>是关闭的- 即通过模板引用或链检索的组件的公共实例，不会公开在.$parent<script setup>

这也会影响 Vue Test Utils 中的类型wrapper.vm，使其仅包含组件的公共或公开的props <script setup>。

在您的情况下，使用defineExpose()编译器宏来公开hello：

<script lang="ts" setup>
import { computed } from 'vue';

const hello = computed((): string => {
  return 'Hello';
});
     
defineExpose({ hello });
</script>