Get rid of "Unresolved function/method/variable" warning in Jest test files

I'm using Jest in WebStorm and can't figure out how to get rid of the grey squiggly underlines for `expect` and matcher methods:

I couldn't find a Jest plugin for Webstorm, and setting up eslint-plugin-jest didn't resolve these inspection warnings.

16
30 comments

In Preferences | Languages & Frameworks | JavaScript | Libraries, press Download..., select 'jest' from the list of available stubs, press Download and Install

 


82
Avatar
Permanently deleted user

Followed the steps above on Webstorm latest release version. Nothing happens after clicking 'Download and Install'.

"In Preferences | Languages & Frameworks | JavaScript | Libraries, press Download..., select 'jest' from the list of available stubs, press Download and Install"

9

works fine for me. Please recreate the issue and provide your idea.log (https://intellij-support.jetbrains.com/hc/en-us/articles/207241085-Locating-IDE-log-files). Please put the file on file server, don't paste its content here

If downloading via Languages & Frameworks | JavaScript | Libraries doesn't work for you, you can add typings manually by running `npm i @types/jest` in your project root folder

4
Avatar
Permanently deleted user

trying to get this to work.  btw there is a related bug for what Alt talked about where Download and Install does nothing:

https://youtrack.jetbrains.com/issue/WEB-30028

It's fixed in the latest EAP build of 2017.3.2.

Still, even with that, I am experiencing the same issue and can't get the underline to go away for it() and describe() by either doing Download and Install, or manually running the npm command.

0

works for me. What library did you download?

If the problem persist after invalidating caches (File | Invalidate caches, Invalidate and restart), please share a sample project that shows up the issue

1
Avatar
Permanently deleted user

Works partially in my case. For some reason IDEA could resolve "toBe" (with jump to declaration), but not "expect". But I use Yarn, not NPM, so that's could be the case, but it still annoying.

0

If the problem persist after invalidating caches (File | Invalidate caches, Invalidate and restart), please share a sample project that shows up the issue

2
Avatar
Permanently deleted user

Invalidating caches didn't help. I've created a sample project – https://github.com/h8/yarn_jest_ide_inspections

You can see, how it looks – expect is not recognized, while toBe – it is. Situation is the same on Linux (Ubuntu 17.10) and MacOS (10.13.2) systems. Node version is 9.3.0, Yarn 1.3.2. Everything else is in the package.json file. IntelliJ IDEA 2017.3.2 (Ultimate Edition)
Build #IU-173.4127.27

JRE: 1.8.0_152-release-1024-b8 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.13.2

0

reproduced; `expect` is actually resolved, but has a false 'Missing import' warning reported. https://youtrack.jetbrains.com/issue/WEB-30236 is fixed in 2017.3.3

1

Hi there.

I can't see any 'Jest' item in my PyCharm libraries list.

PyCharm 2017.3.3 Professional

0

Switch from 'Official libraries' to 'TypeScript Community stubs':

 

0
Avatar
Permanently deleted user

Same issue here, only the 'expect' keyword is not recognized.

When I try to download jest via Languages & Frameworks | JavaScript | Libraries like mentionned above, I get 'can not install Noe.js modul: Please specify npm or yarn package'.

I already have @types/jest in my package.json

(using WS 2018.1.5)

Edit :

It's now working just fine, but I don't get what did the trick haha (did not have to download jest)

0

Hi,

I've been having this issue lately after it used to work just fine. 

I have `@types/jest` working in all of my projects except for my most recent one, which stopped working once I ejected from CRA.

Strangely enough, if I delete all my project's `node_modules`, the the intellisense on Jest works just fine - but as soon as I run `yarn install` the intellisense stops working and I get the "Unresolved function of method xxx" error. So I suspect one of my packages are causing `@types/jest` to stop working.

 

What I've tried: 

1) All the methods discussed in here.

2) This workaround -> https://medium.com/front-end-hacking/fix-element-is-not-imported-jest-describe-it-expect-in-webstorm-aaf8c29ae3c2

3) Invalidating webstorm cache and restarting.

4) Reinstalling packages multiple times after deleting lock files

 

My current setup:

1) My Webstorm version is 2018.2.3

2) My `package.json` looks as follows:

{
...
"dependencies": {
"axios": "0.18.0",
"classnames": "2.2.6",
"dashjs": "2.9.0",
"get-countries-info": "1.2.1",
"lodash": "4.17.10",
"moment": "2.22.2",
"nuka-carousel": "4.3.5",
"prop-types": "15.6.2",
"querystringify": "2.0.0",
"react": "16.4.2",
"react-custom-scrollbars": "4.2.1",
"react-dom": "16.4.2",
"react-icons-kit": "1.1.7",
"react-image-fallback": "8.0.0",
"react-lottie": "1.2.3",
"react-player-controls": "0.5.21",
"react-redux": "5.0.7",
"react-router-dom": "4.3.1",
"react-select": "2.0.0",
"react-toastify": "3.3.4",
"redux": "4.0.0",
"redux-promise": "0.6.0",
"redux-thunk": "2.3.0",
"uuid-validate": "0.0.3"
},
"devDependencies": {
"autoprefixer": "9.1.5",
"babel-core": "6.26.3",
"babel-eslint": "9.0.0",
"babel-jest": "23.4.2",
"babel-loader": "7.1.2",
"babel-preset-react-app": "3.1.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"enzyme": "3.6.0",
"enzyme-adapter-react-16": "1.4.0",
"enzyme-matchers": "6.0.4",
"eslint": "5.5.0",
"eslint-config-prettier": "3.0.1",
"eslint-config-react-app": "2.1.0",
"eslint-loader": "2.1.0",
"eslint-plugin-flowtype": "2.50.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jest": "21.22.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-prettier": "2.6.2",
"eslint-plugin-react": "7.11.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "2.0.0",
"fs-extra": "7.0.0",
"generate-react-code": "1.3.0",
"husky": "0.14.3",
"html-webpack-plugin": "3.2.0",
"jest": "23.5.0",
"jest-enzyme": "6.0.4",
"jest-mock-console": "0.4.0",
"lint-staged": "7.2.2",
"moxios": "0.4.0",
"node-sass-chokidar": "1.3.3",
"npm-run-all": "4.1.3",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"promise": "8.0.1",
"prettier": "1.14.2",
"raf": "3.4.0",
"react-dev-utils": "5.0.2",
"redux-devtools-extension": "2.13.5",
"redux-logger": "3.0.6",
"resolve": "1.8.1",
"style-loader": "0.23.0",
"sw-precache-webpack-plugin": "0.11.5",
"url-loader": "1.1.1",
"webpack": "3.12.0",
"webpack-dev-server": "2.11.3",
"webpack-manifest-plugin": "2.0.3",
"whatwg-fetch": "2.0.4"
},
"babel": {
"presets": [
"react-app"
]
}
}

3) My `eslintrc.json` file looks as follows:

{
"env": {
"browser": true,
"es6": true,
"jest/globals": true,
"jest": true,
"node": true
},
"globals": {
"process": true,
"localStorage": true,
"customScrollHandler": true,
"customOnScrollEvent": true
},
"extends": [
"react-app",
"prettier",
"eslint:recommended",
"plugin:react/recommended",
"plugin:jest/recommended",
"plugin:jsx-a11y/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": ["react", "jest", "prettier", "jsx-a11y"],
"settings": {
"react": {
"version": "16.4.2"
}
},
"rules": {
"class-methods-use-this": "off",
"semi": ["error", "always"],
"no-console": ["error", { "allow": ["warn", "error"] }],
"react/jsx-handler-names": "off",
"import/no-namespace": "off",
"import/namespace": "off",
"import/prefer-default-export": "off",
"import/default": "off",
"react/prefer-stateless-function": "off",
"react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "ignore" }],
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/media-has-caption": "off",
"jsx-a11y/no-static-element-interactions": "off",
"jsx-a11y/label-has-for": "off",
"jsx-a11y/no-noninteractive-element-interactions": "off",
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/anchor-is-valid": "off"
}
}

 

Any help will be appreciated!

0

Please can you provide screenshot(s) that show up the issue?

0
Avatar
Permanently deleted user

For what it's worth I was experiencing the exact same symptoms. @types/jest installed in Webstorm and by yarn. Turns out I had specified typeRoots: [ <somePath> ] without specifying node_modules as well. So I removed the typeRoots entry which I no longer needed and it now works as expected

1
Avatar
Permanently deleted user

I thought I had the same issue but then I realized it's not WebStorm but ESLint that was complaining about it.  So I simply added jest to my .eslintrc:

"env": {
"jest": true
},

Hover the mouse cursor on the underlined expect and look at the pop-up if it says ESLint.

8
Avatar
Permanently deleted user

Manually adding the folder containing my node modules helped with this. File > Settings > Languages and Frameworks > JavaScript > Libraries > Add

2
Avatar
Permanently deleted user

got to  Languages & Frameworks | JavaScript | Libraries | Download | then type " expect " 

downloading ( expect ) library should solve the auto-complete issue for ( expect ) , so if you face the same problem with ( express ) library then u should donwload express library and so on .

 

https://www.youtube.com/watch?v=9izXNWHD5Qg

watching this short video should give you an explanation why this issue exists . 

1

Just install

npm install --save-dev @types/jest
yarn add --dev @types/jest

This worked for me.

10

I've just installed the latest EAP  (via snap in Ubuntu) and hit the issue again. I fixed it as Lkaruhanga suggested in his comment. I have @types/jest installed in my package.json. I referenced manually the folder node_modules/@types/jest in Intellij settings screen: File | Settings | Languages & Frameworks | JavaScript | Libraries

My EAP version is:


IntelliJ IDEA 2020.2 EAP (Ultimate Edition)
Build #IU-202.4357.23, built on May 27, 2020
IntelliJ IDEA EAP User
Expiration date: June 26, 2020
Runtime version: 11.0.7+10-b912.1 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 4.15.0-101-generic
GC: ParNew, ConcurrentMarkSweep
Memory: 1923M
Cores: 8
Non-Bundled Plugins: com.intellij.plugins.html.instantEditing, org.intellij.scala, training
Current Desktop: ubuntu:GNOME
0

I had this problem (WebStorm 2020.2.1) and fixed it by

1) installing @types/jest as Elena Pogoroleva suggested and also install ts-jest package as a dev dependency

2) add this entry in tsconfig.json:

"compilerOptions": {
"types": [
"jest"
]

If using tslint instead of eslint, install package tslint-jest (as a dev dependency) and add this entry to tslint.json:

"extends": [
"tslint-jest"
...

Hope this helps.

0

What I found for me was that @types/jest was not enough, because of other libraries I am utilizing.

The libraries I downloaded to get it to work:

* @types/jest

* @types/testing-library__jasmine-dom

* @types/testing-library__jest-dom

 

0

Running WebStorm 2021.1.1 on wslg, describe/expect/etc. are recognized but jest methods aren't (jest.fn(), jest.mock()):

Anyone have experience with this?

1

I tried all of the solutions above but nothing works.  Jest methods themselves are recognized, intellisense is working on the `jest` namespace, but the keyword `jest` itself is being flagged as unrecognized.  I installed `@types/jest` stub (the library was already installed as part of the project).  Still the problem persist.  I'm using Webstorm 2022.2.2.

I recently switched from MacOS Big Sir to Monteray.  Webstorm was working fine on my old computer, though I think I had v. 2022.2.1.

1

Anna Talis Unfortunately, we failed to reproduce the problem. Please share a sample project which we could use for this purpose within a support ticket so we can continue the investigation.

0

I am using Webstorm 2022.3 EAP, and the solution that worked for me was:

  1. Going to File -> Settings -> Language & Frameworks -> Javascript -> Libraries
  2. Clicking Download button (mid-right on your screen)
  3. Finding Jest library and clicking "Download and install"
1

I'm using ts-jest and jest, ts jest has it's own globals.d.ts file where it import jest's expect. Overriding the regular types that comes from Jest.

The solution was to mark this file as “plaintext”

 

 

0

Checking in from March 2024. This is consistently a problem in both PHPStorm and WebStorm, regardless of installing jest, invalidating caches, or anything. Something this basic and common to almost every web developer should work out of the box without jumping through hoops that don't even actually work. Please fix this.

1

Unfortunately, the issue is not reproducible on our side so it's not clear what has to be fixed. Please share a sample project which we could use for this purpose within a support ticket so we can continue the investigation.

0

Please sign in to leave a comment.