How to use typescript correctly?

[kimond]

I'm not sure if this issue belongs to this project. However, I'm using vue-test-utils since the beginning (even when its name was Avoriaz). But I have some issue to use SFC with typescript and Jest. I was wondering if you planned to write more documentation about which test runners or libs we should use to work properly with Typescript + Jest + Vue-test-utils?

Thank you!

[eddyerburgh]

@blake-newman would you be able to write a guide on using vue-test-utils with TypeScript?

[RehanSaeed]

Would love this. I'm following a blog post by Alex Joverm but failing to get it to work at all.

[kimond]

@RehanSaeed the blog post of Alex Joverm doesn't use TypeScript.

[blake-newman]

The main issue, is that wrapper.vm is typed as a generic Vue instance. This should probably typed as the component instance in use. So you can correctly use wrapper.vm in knowledge about what properties are available.

Everything is as you would expect, following the guides.

[ktsn]

Just following up @blake-newman's explanation, wrapper.vm is typed as Vue because TypeScript cannot know the component type in .vue files - we usually annotate them like this to avoid compilation error https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components. If the components are written in normal .ts file, wrapper.vm should be inferred correctly.

Vetur (and probably WebStorm) have their own language service which can deal with .vue files but they only affect .vue files. That means components imported in .vue are typed correctly while components imported in .ts are not.

To be available typed components in .ts, we should use TypeScript plugin vue-ts-plugin or generate .d.ts for each .vue file by using vuetype. But they are still experimental and might not be able to be used in practical projects.

I think it would be the best if Vetur supports TypeScript plugin so that we can use its feature in .ts files including type inference for .vue files.

[mikejamesli]

I have recently started writing Vue unit tests using Jest + Typescript + Vue test utils, however i'm facing an issue where passing in my component object into the shallow function appears differently when using vue with typescript.

I believe the reason is because it's using the default constructor of vue (vue-shims.d.ts) and not the typed component. As explained by @ktsn.

Is there a way to pass in the component object correctly using typescript?

Source code to reproduce the issue: https://github.com/mikeli11/Vue-Typescript-Jest

Using typescript:

students.vue

Student.Test.ts

Without typescript (https://github.com/vuejs/vue-test-utils-jest-example)

[tlaak]

@kimond What does your Jest configuration look like? My setup cannot even resolve the modules in tests. I have ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" in the config, but importing components from *.vue files in tests only gives a Cannot find module error.

[kimond]

@tlaak Here is my jest configuration. However, I did nothing special in order to make it works.

  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.ts$": "<rootDir>/node_modules/ts-jest/preprocessor"
    },
    "verbose": true
  }

I forgot to mention that I needed to revert to vue-test-utils 1.0.0-beta.12 since I got some issues with vue-test-utils 1.0.0-beta.13. Since I didn't try the latest version of vue-test-utils.

[tlaak]

@kimond That looks like the same I have. I noticed that the module resolution fails if I have my tests in the tests/ directory. When I move a test file under src/ it will pass.

[elevatebart]

@tlaak It seems like your tsconfig.json is not configured correctly. Only the files in includes (and not in excludes) are compiled and tested. Here is mine for reference:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "tests/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

[tlaak]

@kimond

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es5", "es2015"],
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "outDir": "./built",
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "target": "es5"
  },
  "include": ["src/**/*", "test/**/*"]
}

My imports are working just fine when I'm running the app in browser. I have the baseUrl set to . so I can use paths like import foo from 'src/components/foo', but these are not working in tests either. I need to use relative import paths there.

[kimond]

@tlaak
You need to set a moduleNameMapper in your Jest config. Here an example.

  "jest": {
    "moduleNameMapper": {
      "^src/(.*)$": "<rootDir>/frontend/src/$1",
    },
  }

With the config above you will be able to use src/components/foo from your tests.