IDE does not recognize Jest and its functions

Question

I have a basic react-native/expo template app. I have added jest-expo and react-test-renderer in the dev dependencies, and also have updated package.json like documented in the expo docs for testing.

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    ...
    "test": "jest"
  },
  "dependencies": {
    "expo": "~41.0.1",
    ...
    "react": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@testing-library/jest-native": "^4.0.1",
    "@testing-library/react-native": "^7.2.0",
    "jest-expo": "^41.0.0",
    "react-test-renderer": "^17.0.2"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ],
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ]
  }
}

I have also added React Native Testing Library to test the UI. And the tests are running fine.

But the problem is that WebStorm IDE is not recognizing Jest and its functions.

Could you please help me figure this out?

Update

As per the comments, I tried installing the Typescript Jest types definition through the Settings config and also tried installing with yarn/npm . But this didn't help.

Another Update

However, If I uncheck the project's node_modules libraries, the Jest type definitions picks up.

But doing so, other types of node_modules doesn't work!

Hilariahilario

can you try installing type definitions for jest ? npmjs.com/package/@types/jest – Eosin

@UğurEren Yes, I have tried adding @types/jest, but the problem still exists. – Hilariahilario

Answer 1

In Preferences - Languages & Frameworks - JavaScript - Libraries, press Download, then Select jest from the list, press Download and Install. If it didn't work try npm i @types/jest in your Local Folder.

Moniliform

Hi, I tried installing the type definition but that didn't work. However, if I uncheck the node_modules libraries the Jest types work. But doing so other node_modules types doesn't work. I have updated the question with the recent developments. – Hilariahilario

@MswTm Can you add your .eslintrc file to the question? – Moniliform

Sorry, I am not using .eslintrc – Hilariahilario

Answer 2

Have you tried this WebStorm configuration?

You might have noticed that some of the global Jest methods (like describe and beforeEach) in JavaScript files are marked as unresolved in the editor. To fix that, install the TypeScript type definition files for Jest: Go to Preferences | Languages & Frameworks | JavaScript | Libraries, click Download on the right-hand side of the dialog, then search for Jest in the list and click Install. Or add @types/jest to devDependencies in project’s package.json.

Selfregulating

Hi, I tried installing the type definition but that didn't work. However, if I uncheck the node_modules libraries the Jest types work. But doing so other node_modules types doesn't work. I have updated the question with the recent developments. – Hilariahilario