CODEWITHSUNDEEP
reactjsvisual-studio-codejestjsintellisense
Barrard
Barrard

Reputation: 2053

Intellisense for Jest not working in VS code

Edit: Run npm install @types/jest --save-dev To fix

Just trying to type it() and the auto suggestion is isTag

enter image description here

I've tried adding a jsconfig.json

{
"compilerOptions": {
    "target": "es6"
},
"exclude": [
    "node_modules",
    "assets"
  ]
}

Thank you for anyone who has a suggestion for this!!

Upvotes: 97

Views: 50351

Answers (13)

S. Hesam
S. Hesam

Reputation: 6763

Update 2025

Just install @types/jest via this command:

npm i @types/jest --save-dev

or

yarn add -D @types/jest

Upvotes: 76

Diogo Rocha
Diogo Rocha

Reputation: 10625

Add to your jsconfig.json(create in the root of your project if not present):

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

If this do not work try with this command:

npm install @types/jest

or

yarn add -D @types/jest

Upvotes: 186

Monarch Wadia
Monarch Wadia

Reputation: 4996

I had to run tsc --init to generate a tsconfig.json file. After that, VSCode picked up the types.

Upvotes: 0

mykeels
mykeels

Reputation: 630

This won't be for everyone but if the codebase has multiple packages in a monorepo and you use vscode as your editor, you might want to install @types/jest in the root, rather in the individually packages.

Upvotes: 5

Norbert
Norbert

Reputation: 879

I didn't see this mentioned before but using explicit imports are a valid option if the dependencies are already in the package.json and vscode is still not getting the message. In my case vscode kept intellisensing mocha for describe, it, beforeAll, and expect.

I tried all options but creating a jsconfig.json

S/o @vikramvi for his comment on OP's question which led me to that solution.

Before explicit imports Before explicit imports 1 Before explicit imports 2

After explicit imports After explicit imports

Upvotes: 0

Lurin
Lurin

Reputation: 21

npm i -D @types/jest

it adds a line automaticaly in package.json :

    "devDependencies": {
        "@types/jest": "^29.5.2",
        "jest": "^29.5.0"
      }

You have nothing else to do.

Upvotes: 2

UniCoder
UniCoder

Reputation: 3243

If nothing has been worked so far, you can try this.

check "types": ["node","jest"], in tsconfig.json file.

If jest is not added in the list, add and restart VS Code.

Upvotes: 0

Cameron Hudson
Cameron Hudson

Reputation: 3950

The Typescript extension was the root cause of my issue. I was trying to use Jest, but the expect type was being overridden by the expect from expect.js, which was apparently being auto-installed into a global cache by Typescript at /Users/cameronhudson/Library/Caches/typescript/5.0/node_modules/@types/expect.js. My preliminary "fix" is to disable automatic type acquisition by the Typescript extension. This can be done in the settings for the extension.

enter image description here

I have a feeling that this is a heavy-handed solution, but hopefully it will lead someone to a proper solution.

Upvotes: 4

Bart van Oort
Bart van Oort

Reputation: 360

The correct answer is indeed to install @types/jest:

yarn add -D @types/jest

However, if you have that installed and Jest's functions (describe, it, etc.) still have no type information in VS Code, check your your typeRoots in tsconfig.json.

I had made some custom types for a package that didn't have any and placed them in a ./types folder. To get TypeScript to recognise those, I added typeRoots: ["./types"] to my tsconfig.json. However, specifying type roots there overrides TypeScript's default value of ["./node_modules/@types"], thus it will no longer be able to find @types/jest.

So, if you have a custom value for typeRoots in your tsconfig.json, then besides installing @types/jest, make sure you also include this (replace ./types with any other custom type root folders you have configured):

    "typeRoots": ["./node_modules/@types", "./types"],

Upvotes: 1

Jose A
Jose A

Reputation: 11129

Strange that these haven't been shared - Use jsdoc instead:

https://jestjs.io/docs/configuration

jest.config.js

/** @type {import('jest').Config} */
const config = {
  verbose: true,
};

module.exports = config;


/** @returns {Promise<import('jest').Config>} */
module.exports = async () => {
  return {
    verbose: true,
  };
};

If you're using a TypeScript file (jest.config.ts):

import type {Config} from 'jest';

const config: Config = {
  verbose: true,
};

export default config;

import type {Config} from 'jest';

export default async (): Promise<Config> => {
  return {
    verbose: true,
  };
};

Upvotes: 0

Centerwork
Centerwork

Reputation: 327

Where you call it makes a difference. Sometimes intellisense doesn't work when you are in a bad function or code block.

So if you try:

  beforeEach(() => ({
    mockedUseAccount.
  }));

Intellisense doesn't work.

If you try:

  beforeEach(() => {
    mockedUseAccount.
  });

Intellisense works fine.

Upvotes: 0

Noobish
Noobish

Reputation: 1265

Non of the solution works for me. After diving into some github repos in which I found it working, I found a file called jest.config.js. Following are the configs of the file:

module.exports = {
  transform: {
    '^.+\\.ts?$': 'ts-jest',
  },
  testEnvironment: 'node',
  testRegex: './src/.*\\.(test|spec)?\\.(ts|ts)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  roots: ['<rootDir>/src'],
};

Note: This is for ts. Change all the ts with js if you are not using typescript. After saving, Restart Vscode and it will work as expected.

Upvotes: 1

solmans
solmans

Reputation: 587

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

for those who have no luck adding above to jsconfig.json in the root folder: try adding it to tests folder (the folder containing *.test.js files)

Upvotes: 24

Related Questions