Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'],
}
like image 877
Alpha60 Avatar asked Oct 12 '20 11:10

Alpha60


People also ask

What is Jest used for?

Jest is an open-source testing framework built on JavaScript, designed majorly to work with React and React Native based web applications. Often, unit tests are not very useful when run on the frontend of any software. This is mostly because unit tests for the front-end require extensive, time-consuming configuration.

Who is using Jest?

Who uses Jest? 894 companies reportedly use Jest in their tech stacks, including Airbnb, Facebook, and Instagram.

Is Jest only for JavaScript?

jest. It. only JavaScript and Node.

How do you write a Jest test?

To create a test case in Jest we use the test() function. It takes a test name string and handler function as the first two arguments. The test() function can also be called under the alias - it() .


1 Answers

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

// tsconfig.json
{
  "compilerOptions": { /* ... */ },
  "typeAcquisition": { "include": ["jest"] },
  // ... your other options go here
}
like image 122
Yannick Schuchmann Avatar answered Oct 13 '22 01:10

Yannick Schuchmann