Jest is not recognized by typescript

Question

--- UPDATE---- I can run the test using command line but can't run the test with Jest Runner extension in VSCode.

------Original Question -----------------

I think I have corrupted my npm modules because I tried to install some more recent version of jest and ts-jest related modules in my project (was hoping to fix some test related problem) but it caused a lot of other problems so I just reverted the package.json and package.lock.json.

Now in my test files, it doesn't recognize jest anymore. Typescript simple shows a bunch of errors complaining it can't find jest, can't find describe (which is defined in jest).

I tried to delete the node_modules folder and run npm install, that didn't help. I cleared npm cache; it didn't help. Not sure what else I can try.

This is my tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",

    "allowJs": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,

    /* Strict Type-Checking Options */
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,

    "experimentalDecorators": true,
    "types": [
      "node",
      "jest"
    ],
    "baseUrl":".",
    "paths": {
      "@/*": [
      "src/*"
      ]
      },
  },

  "include": [
    "src/**/*.ts",
    "*.ts",
    "src/**/*.json"
    ]
}

Sorry but not sure what else I can share apart from a screenshot in this particular case.

---- Add part of package.json ----

Atlantes

add jest as a type in your tsconfig.json. – Postmillennialism

it's already there; just updated the question @Postmillennialism – Atlantes

Seems like you are missing @types/jest package. You could remove your node_modules and then npm install to recreate if you think it’s corruption. – Anelace

I did try that as said in the question but somehow it didn't help. @DaveMeehan – Atlantes

@DaveMeehan how come I don't see a types/jest folder in my `node_modules? – Atlantes

It should be a dependency. Can you show relevant part of your package.json? Note that the leading @ is important. – Anelace

@DaveMeehan. I just added part of the package.json to the question. – Atlantes

@types/jest is one major version behind the current, jest is two majors behind. You might want to try uninstalling all of the jest related deps and reinstalling them (or use npm upgrade with appropriate options). Did you follow the steps outlined in the other answer? – Anelace

Answer 1

Just in case this helps someone in the future. The issue is resolved by adding "**/*.spec.ts" to the include in the tsconfig.json

Not sure why this is needed as it was working fine before; guess it must be because some partial upgrade I did.

Atlantes

do you have to run npm install again or .tsc or anything? – Lorylose

This will include the tests folder in the output directory which increases the bundle size. – Tatum

Answer 2

What I always do when I have to test my projects is the following. I will try to explain step by step.

1- Remove everything related to Karma/Jasmine in the package.json:

npm remove <karma karma-chrome-launcher...>

Inside the <> type everything related to those libraries.

2- Install Jest:

npm install --save-dev jest jest-preset-angular @types/jest

3- Create setup-jest.ts in the root folder of your project, and put this inside:

import 'jest-preset-angular/setup-jest';

4- Add jest config to package.json:

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setup-jest.ts"
    ],
    "globalSetup": "jest-preset-angular/global-setup"
  }

5- Configure JEST in tsconfig.json and tsconfig.spec.json, add this:

"types": [
  "jest"
]

6- Configure commands to test your app:

"test": "jest",
"test:watch": "jest --watchAll",

7- Remove karma.config.json and test.ts.

This should work if you are using Angular. I don't work with other framework/library, so I don't really know if this is how you do it there.

Ozalid

Sorry but this is from Vue not Angular. Thanks anyway. – Atlantes

This documentation is better than the official documentation itself! Thank you @Ozalid – Interrelate

“5- Configure JEST in tsconfig.json and tsconfig.spec.json, add this“. is adding "types": [ "jest" ] in both files are required? Or only in tsconfig.spec.json? – Mamey

I can't give you a proper answer im afraid, so try both adding and not adding and see if something breaks. Comment what happens please so I can update my answer according to that, please – Ozalid

Answer 3

In my case, I had to add the jest types by adding "types": [ "node", "jest" ] to compilerOptions object in tsconfig.json

Sankhya

Answer 4

Using NX + Angular + Jest

Create a library and set:

"types": ["jest", "node"],

in tsconfig.json and tsconfig.lib.json.

Create a file with the following function and export it in the index.ts of such library:

export function mockWindowMatchMedia(): void {
  Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
      matches: false,
      media: query,
      onchange: null,
      addListener: jest.fn(), // deprecated
      removeListener: jest.fn(), // deprecated
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    })),
  });
}

Now in the test-setup.ts file of the library where you experience the issue, add the following:

import { mockWindowMatchMedia } from '@bhome/shared/utils/testing';

mockWindowMatchMedia();

Mcgruter