'Cannot find name 'it' in Jest TypeScript

I try to create an intial setup for Jest in React + TypeScript. I have completed the initial setup and try to check whether the test runs. When I run the test using the command npm test, I am getting the following error:

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

I have installed the types for Jest as well as removed the types in tsconfig.json, but still I am getting the same error.

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "plugins": [{ "name": "typescript-tslint-plugin" }],
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "pretty": true,
    "baseUrl": "src",
    "types": ["jest"],
    "typeRoots": ["./src/types"],
    "suppressImplicitAnyIndexErrors": true
  },
  "include": ["src", "node_modules/@types/jest"],
  "exclude": ["node_modules"]
}
`

Package.json


    "jest": {
        "transform": {
          ".(ts|tsx)": "ts-jest"
        },
        "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
        "moduleFileExtensions": [
          "ts",
          "tsx",
          "js"
        ]
      },
      "devDependencies": {
        "@babel/plugin-proposal-export-default-from": "^7.2.0",
        "@types/enzyme": "^3.9.3",
        "@types/jest": "^24.0.14",
        "enzyme": "^3.10.0",
        "gh-pages": "^1.2.0",
        "husky": "^2.2.0",
        "jest": "^24.8.0",
        "node-sass": "^4.11.0",
        "prettier": "^1.17.0",
        "react-scripts": "2.1.8",
        "react-test-renderer": "^16.8.6",
        "stylelint": "^9.3.0",
        "stylelint-config-recommended-scss": "^3.2.0",
        "stylelint-config-standard": "^18.2.0",
        "stylelint-order": "^0.8.1",
        "stylelint-scss": "^3.1.3",
        "ts-jest": "^24.0.2",
        "tslint": "^5.16.0",
        "tslint-config-prettier": "^1.18.0",
        "tslint-plugin-prettier": "^2.0.1",
        "tslint-react": "^4.0.0",
        "tslint-react-hooks": "^2.1.0"
      }
typescriptnpmjestjsts-jest


Solution 1:[1]

Install

npm install -D jest @types/jest ts-jest

jest.config.js -- at root

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

tsconfig.json

{
    "compilerOptions": {
     ...

      "types": ["reflect-metadata", "jest"],
      "typeRoots": ["./types", "./node_modules/@types"]
     
     ...
    },
    "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
    "include": ["./src/**/*.tsx", "./src/**/*.ts"]
  }

Solution 2:[2]

For me, the problem was that my tsconfig.json was built with 

  "include": [
    "src"
  ]

I had to change that to

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

(My tests all being in directory 'tests')

Solution 3:[3]

In tsconfig.json add the below code

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

Solution 4:[4]

Import this in any of your test files:

import '@types/jest';

Solution 5:[5]

I've tried all the above solutions, but unfortunately, none of them worked out for me. The solution that worked in my case though was to reference the type definitions via /// <reference types="@types/jest" />; at the top of the file. You need to install @types/jest package first. The downside to it is that you have to import it into all the files.

Solution 6:[6]

I had to add "@types/jest" to my "types" array in my tsconfig.json.

Solution 7:[7]

Updating ts-loader to v6.0.1 or above can do a trick.

Solution 8:[8]

install @types/jest npm install @types/jest and in package.json add config to jest

...
"jest": {
     "globals": {
      "ts-jest": {
        "tsconfig": "path_our_tests/jest.tsconfig.json"
      }
    }
}

Create file jest.tsconfig.json into test directory and ajust like this:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["jest"]
  }
}

this way you not change the configs globals of your project, and prevents break you code

Solution 9:[9]

I had to install jest in the devDependency:

npm i --save-dev @types/jest

Solution 10:[10]

None of the above solutions worked for me. Not even importing '@types/jest' which was throwing error while doing npm test to import 'jest' instead. The only solution for me is import { describe, it, beforeEach } from '@jest/globals' to test files

Solution 11:[11]

After inspecting the output of npx ts-jest config:init (as suggested in the ts-jest documentation) I discovered that adding this line to the top of my jest.config.js file did the trick:

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */

Solution 12:[12]

In my case, the problem was that I actually didn't have a jest folder in my ./node_modules/@types directory. Running npm i @types/jest claimed that the package was up to date but it still didn't exist in my node_modules/@types where it should be installed so the error persisted.

I fixed the issue by installing @types/jest globally and copying the installed package to my ./node_modules/@types.

To install @jest/types globally run:

npm i -g @types/jest

To get the path to your global node_modules run:

npm root -g

To confirm that the @types/jest package is there run:

ls $(npm root -g)/@types

Then cd into your project directory and run

cp -R $(npm root -g)/@types/jest ./node_modules/@types

to copy it to your local node_modules.

Related Questions