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?

To my knowledge, you shouldn't neet to fiddle with the types field of tsconfig for a properly configured npm dependency. — starball
– starball ♦, Commented Mar 8, 2023 at 22:36
It's working for me. Are you sure you've added that in your root tsconfig.json? Not something like tsconfig.test.json — Valorad
– Valorad, Commented Mar 14, 2023 at 20:22
Maybe tsconfig.test.json too, but for your IDE to understand, it has to be tsconfig.json — Valorad
– Valorad, Commented Mar 14, 2023 at 21:09
I had this. The answers below did not help but just restarting VSCode did — Joseph Beuys' Mum
– Joseph Beuys' Mum, Commented Jan 23, 2024 at 12:06
It should be possible to tell the IDE to use tsconfig.test.json instead, but I can't find any way to do that. Changing the tsimporter.tsconfigName settings doesn't help. — Adam Spiers
– Adam Spiers, Commented Dec 31, 2024 at 12:01

Joshua Biyinzika · Accepted Answer · 2024-03-27 05:38:01Z

11

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

answered Mar 27, 2024 at 5:38

Joshua Biyinzika

1111 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdulsattar Mohammed Over a year ago

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

Stefan Djokic · Accepted Answer · 2023-06-14 12:14:46Z

8

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.

answered Jun 14, 2023 at 12:14

Stefan Djokic

912 silver badges8 bronze badges

Comments

tdy · Accepted Answer · 2024-06-05 04:08:48Z

6

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"],
}

edited Jun 5, 2024 at 4:08

tdy

42k42 gold badges124 silver badges125 bronze badges

answered Jun 4, 2024 at 0:27

Noe

611 silver badge3 bronze badges

Comments

call0fcode · Accepted Answer · 2024-05-27 12:58:29Z

4

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

answered May 27, 2024 at 12:58

call0fcode

1631 silver badge6 bronze badges

1 Comment

Adam Spiers Dec 31, 2024 at 12:07

I have the test files excluded from my tsconfig.json (and then that exclude reversed in tsconfig.test.json). I have globals enabled in vite.config.ts, plus vitest/globals in types and typeRoots including ./node_modules, but it still doesn't recognise the globals. This seems like a bug. It should be possible to configure VSCode to use tsconfig.test.json but apparently it isn't.

wujin · Accepted Answer · 2023-04-21 09:24:46Z

1

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

answered Apr 21, 2023 at 9:24

wujin

273 bronze badges

3 Comments

Community Over a year ago

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.

ajthinking Over a year ago

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

machineghost Over a year ago

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 :(

Carlos Reyes · Accepted Answer · 2024-06-20 18:39:19Z

1

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

  globals: {
    "vitest": true
  },

answered Jun 20, 2024 at 18:39

Carlos Reyes

631 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to get vscode to recognise vitest globals?

6 Answers 6

1 Comment

Comments

Comments

Additional context

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Additional context

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related