Jest & TypeScript: VS Code can't find names

Question

I am using Jest with TypeScript. Despite the fact that my code works and I can build my project, Visual Studio Code throws me that error for all Jest methods (describe(), test()...):

Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.ts(2582)

I have src and tests directories that are separated. I followed configurations found on the Internet but it doesn't change anything, what am I missing? The only way so far is to include my tests folder in the include setting in tsconfig, which is bad because it's built in the dist directory.

Dev dependencies installed: jest ts-jest @types/jest

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowJs": true,
    "jsx": "react",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    },
    "typeRoots": ["./node_modules/@types"],
    "types": ["node", "jest"]
  },
  "strict": true,
  "compileOnSave": false,
  "include": ["src"]
}

jest.config.js

module.exports = {
  roots: ['<rootDir>'],
  preset: 'ts-jest',
  testRegex: 'tests/src/.*\\.test.(js|jsx|ts|tsx)$',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  transformIgnorePatterns: [],
  snapshotSerializers: ['enzyme-to-json/serializer'],
  moduleDirectories: ['node_modules', 'src', 'tests'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleNameMapper: {
    '\\.(css|scss|jpg|png|svg)$': 'mocks/empty.ts',
  },
  setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.ts'],
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js{,x},ts{,x}}', '!src/index.tsx', '!src/custom.d.ts'],
}

Surra

I don't think the issue is with your tsconfig.json file, you should not have to do anything there, not sure about your jest.config.js file, but have you tried developing a test using it() and if so can you post that code with the import statements? Also, what are you running in terminal to run the test? Keep in mind that Jest does not have any knowledge of TypeScript out of the box and even when using jest and ts-jest there will be issues. – Pitching

Please see the answer to the similar question: https://mcmap.net/q/174836/-vscode-ts-language-features-unavailable-when-tests-are-not-included-in-the-tsconfig. – Emblematize

Answer 1

Just include jest as typeAcquisition in your tsconfig.json like:

// tsconfig.json
{
  "compilerOptions": { /* ... */ },
  "typeAcquisition": { "include": ["jest"] },
  // ... your other options go here
}

Adamsun

Love it! Thank you! As of 19 Aug 2022 this option is now called "types" in tsconfig.json as opposed to "typeAcquisition". – Sclerodermatous

@Sclerodermatous afaic on the reference: typescriptlang.org/tsconfig that's not correct. types is a field of compilerOptions but the important setting is typeAcquisition. Or am I wrong? – Adamsun

Yes, you're correct. My mistake. :-) – Sclerodermatous

Answer 2

I have the same problem. And I find the solution - open it in the project's root directory, not the parent one. Or, you can create a workspace with your projects.

Splat

Answer 3

I had the same issue and adding

{
  "compilerOptions: {
    ...
    "types": ["jest"],
    ...
  },
  "include": ["src/**/*"]
}

was not enough, I also had to add

{
  "compilerOptions": { ... },
  "include": ["src/**/*", "test/**/*"]
}

Roussillon

Answer 4

If you have a tests folder outside of "src", make sure it is included in the tsconfig.json

  ,
  "include": [
    "src",
    "tests"
  ],

otherwise you will get

Cannot use namespace 'jest' as a value.ts(2708)

and

Cannot find name 'beforeEach'

Your jest references will be red and won't be recognised.

Disfeature