Since the vue-test-utils don't provide "localvue" for Vue 3 I thought of using createApp from Vue itself.
Now I am also using Typescript.
Somehow my Linter didn't care about this statement:
const app = createApp(App);
But when I want to split declaration and intantiation for my jest tests like this:
let app;
describe("Test Vue", () => {
beforeEach(() => {
app = createApp(App);
});
});
It obviously throws this Error:
Variable 'app' implicitly has type 'any' in some locations where its type cannot be determined.ts(7034)
Now I thought I am smart an just take the type that createApp says it returns:
export declare const createApp: CreateAppFunction<Element>;
like this:
let app: CreateAppFunction<Element>;
describe("Test Vue", () => {
beforeEach(() => {
app = createApp(App); //***declared Module. See End for declaration
});
});
But this will return:
Type 'App<Element>' is not assignable to type 'CreateAppFunction<Element>'.
Type 'App' provides no match for the signature '(rootComponent: Component<any, any, any, ComputedOptions, MethodOptions>, rootProps?: Data | null | undefined): App'.ts(2322)
So I am left wondering: What is the type of app?
***Declaration of App
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}
It turns out it's this:
import { createApp, App } from "vue";
import Application from "@/App.vue";
let app: App;
describe("Test Vue", () => {
beforeEach(() => {
app = createApp(Application);
});
So the type of app that is created by createApp is import { App } from "vue";