VueWrapper typing problem

[stevemandl]

Observed:
While editing the following test file,

// App.spec.ts
import { mount } from "@vue/test-utils"
import { describe, it, expect } from "vitest"
import App from "../src/App.vue"

describe("App", () => {
    it("toggles", () => {
        const wrapper = mount<typeof App>(App)
        expect(wrapper.element.tagName).toBe("DIV")
        expect(wrapper.vm.editButton).toBeFalsy()
    });
});

for this .vue file:

// App.vue
<template>
    <div> <input type="button" :value="String(editButton)" @click="editButton = !editButton" /> </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const editButton = ref<boolean>(false)
</script>

the type of wrapper.vm is ComponentPublicInstance instead of the specific type of the component. This causes the following to be displayed:

However, the test runs without a problem.

Expected behavior: Volar will reference the component type when validating code, and not report a problem if there isn't one.

Example project to reproduce problem: https://github.com/stevemandl/vitest_sample

[so1ve]

🤔 Shall we expose all variables in <script setup> block?

[stevemandl]

@so1ve I'm not sure if that question was for me or not, but I'll lend my 2 cents:
vuejs/test-utils#931 is where VTU exposed everything on wrapper.vm to allow the sample test pass. I'm not sure if this is a problem with VTU or volar, but running vitest from the console passes. Since I am just seeing the problem message in vscode so I thought I would start by reporting it here. Sorry I can't be more help.

[Clarkkkk]

Just for reference, there is more context in vuejs/test-utils#972, in which @pikax mentions that he is doing some work on vuejs/core#4465 (now vuejs/core#9556) to improve types and may help solve this issue.