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?

Essieessinger

To my knowledge, you shouldn't neet to fiddle with the types field of tsconfig for a properly configured npm dependency. – Adamec

It's working for me. Are you sure you've added that in your root tsconfig.json? Not something like tsconfig.test.json – Pyoid

Maybe tsconfig.test.json too, but for your IDE to understand, it has to be tsconfig.json – Pyoid

I had this. The answers below did not help but just restarting VSCode did – Cybil

Answer 1

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.

Stertor

Answer 2

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

Easing

Also check that it's not in "exculde". I had my tests excluded and undoing that worked for me. – Unaccomplished

Answer 3

I've also faced this, but the problem was the eslint configuration. All I had to do was adding globals to my eslint.config.js file:

import globals from 'globals';

languageOptions: {
  globals: {
    ...globals.mocha,
    ...globals.jest,
  }
}

I was using Vitest, so in my vitest.config I added globals:

test: {
  globals: true,
}

And in my tsconfig.json file:

"compilerOptions": {
  "typeRoots": ["node_modules"],
  "types": ["vitest/globals"],
}

Incrassate

Answer 4

Maybe your include option not includes your *.spec.ts files.

Ovid

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Olney

This. Likewise check you don't have *.test.ts in the exclude key. – Protein

This is like solving a fire by turning off your fire alarm. Yes, not applying typescript validations will fix the error ... but you'll lose Typescript validation on all your test files also :( – Consternation

Answer 5

Just removing the exclusion of test.ts/tsx files from the tsconfig.js makes it work form me.

Interestingly I've found that excluding test.ts/tsx files in tsconfig.js with the following:

"exclude": [
    "src/**/*.test.ts",
    "src/**/*.test.tsx"
  ]

makes all globals functions (describe, test. it and so on) get imported from other test runners (Jasmine to be precise) I have on my repo (it's a monorepo where Jest is also installed) and not from the Vitest definitions.

Additional context

I have "vitest/globals" on my tsconfig.js like so:

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

Additionally, I have the following on my vite.config.js as described in the Vitest's documentation to enable the globals like Jest does by default:

/// <reference types="vitest" />
import { defineConfig } from "vite";

export default defineConfig({
  test: {
    globals: true,
  },
});

If it doesn't work for you, try the following things:

• Reopen the file where the globals are not working well
• Restart TS and ESLint servers (by using the command palette)
• Restart VSCode

Hepato

Answer 6

Similar to what Noe posted I noticed that my issue was in my .eslintrc.js configuration. solved by adding:

  globals: {
    "vitest": true
  },

Spindle