Search code examples
typescriptjestjsvuejs3vue-test-utils

What is the Typescript Type of the Vue 3 App?


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;
}

Solution

  • 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";