I've encountered a strange issue while running my npm run dev command in my project built with Nuxt.js, which includes Vue.js components. While launching the application, I'm encountering errors related to TypeScript like
TS2749: 'About' refers to a value, but is being used as a type here. Did you mean 'typeof About'?npm run test.
The problematic line in my spec.ts file is as follows:
import { shallowMount, Wrapper } from "@vue/test-utils";
import About from "@/pages/about.vue";
describe("About", () => {
const wrapper: Wrapper<About> = shallowMount(About); // <-- Issue
...
}
Prior to setting typing, the type seems correct as displayed below:
https://i.sstatic.net/OUN8O.png
Attempting the solution provided by using
const wrapper: Wrapper<typeof About> = shallowMount(About);TypeScript error, preventing the test from compiling. This new error states: TS2344: Type 'ExtendedVue<Vue, unknown, unknown, { setLocation: any; }, unknown>' does not satisfy the constraint 'Vue'. Type 'VueConstructor<{ setLocation: any; } & Vue>' is missing several properties.I am puzzled by the fact that the test command remains quiet, while TypeScript raises complaints about the tests themselves during local app execution. Despite all tests passing and successful app compilation, it appears to be an issue with typings in @vue/test-utils.