CODEWITHSUNDEEP
typescriptvisual-studio-codejestjstsconfigts-jest
Alpha60
Alpha60

Reputation: 431

Jest & TypeScript: VS Code can't find names

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

Upvotes: 18

Views: 12510

Answers (4)

NotMyHat4532
NotMyHat4532

Reputation: 27

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.

Upvotes: 2

Michael Arbib
Michael Arbib

Reputation: 131

I had the same issue and adding

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

was not enough, I also had to add

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

Upvotes: 1

oneWalker
oneWalker

Reputation: 56

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.

Upvotes: 3

Yannick Schuchmann
Yannick Schuchmann

Reputation: 502

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

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

Upvotes: 3

Related Questions