How to get vscode to recognise vitest globals?

Question

I am trying to get vitest globals api to work so I can write describe, test and expect functions without importing them in each test file like in jest.

I have managed to get tests passing by following the guide but I am getting red errors lines when calling the vitest functions in vs-code.

E.g.

Cannot find name 'test'. Do you need to install type definitions for a test runner?
Try npm i --save-dev @types/jest or npm i --save-dev @types/mocha.

I'm sure this is a typescript configuration issue but I have added the global types to the tsconfig file:

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

What do I need to do to get vs-code to recognise the globals?

Answer 1

If adding "vitest/globals" to types array doesn't fix this issue.

Then try checking the include option in tsconfig.json.

What to look for?

Ensure that you have listed the directory your test files are in.

For example, if your test files are in a folder named "tests", then include "tests" as one of the array values of include.

Here is a example:

{
  "compilerOptions": {},
  "include": ["src", "tests"]
}

This will tell typescript to include all the files from that folder during compile time.

Doing so fixed it for me.

You can read more about the include option here: https://www.typescriptlang.org/tsconfig#include

Answer 2

Although adding "vitest/globals" to the types array is absolutely correct and even helped me resolve a very similar issue, you still have to restart VS Code's Typescript Compiler by running their built-in command:

F1 -> TypeScript: Restart TS Server.

This does not require you to install any additional npm packages, as vitest already contains everything you need.