IDE does not recognize Jest and its functions

user_15157329 0
Viewed 443

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.

enter image description here

enter image description here

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.

enter image description here

Another Update

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

enter image description here

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

react-native-testing-library expo react-native jestjs webstorm
2 Answers

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.

user_47191140

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.

user_149456960
Related