Currently, I am in the process of creating a test using vitest to validate a computed property within a vue3 component that is implemented with script setup.
Let's consider a straightforward component:
// simple.vue
<script lang="ts" setup>
import { computed } from 'vue';
const hello = computed((): string => {
return 'Hello';
});
</script>
<template>
{{ hello }}
</template>
The test I have written looks like this:
describe('Hello', () => {
it('should compute hello', () => {
const wrapper = mount(Hello);
expect(wrapper.vm.hello).toBe('Hello');
});
});
This test functions correctly when executed with vitest, indicating that things are working as intended.
However, Visual Studio Code does not recognize the computed properties on the vm object:
https://i.stack.imgur.com/WZe83.png
While normal properties (e.g., those defined with the defineProps macro) are visible. Is this an issue specific to VSCode or is there a more efficient method for testing computed properties in vue3 components?
If the current approach is recommended, is there a way to incorporate the types of the computed properties (similar to how the types of defined props are imported)?
I have attempted the strategy outlined in the Vue Testing Handbook, but it was unsuccessful and I suspect it may only be applicable to vue2.