I have a node.js project that contains some Jasmine specifications. The specifications are in a spec/ subdirectory and have the .spec.coffee extension, as required by jasmine-node.
When I open one of my spec files in the WebStorm IDE, all the calls to beforeEach
and describe
and it
are shown with blue squiggly underlines with the tooltip: "Unresolved function or method it()". So even though I'm using the 3.0 EAP and it's supposed to have some amount of Jasmine support, it's not automatically picking up on the fact that this is a Jasmine spec file.
I tried going into File > Settings > JavaScript Libraries, and adding Jasmine as a library (specifying the path to jasmine-2.0.0.rc1.js), and then going to the Usage Scope sub-page and checking "Jasmine" in the drop-down list next to "Project", but that had no effect -- the Jasmine methods still show up as unresolved.
How can I tell WebStorm that all files in a spec subdirectory, and/or all files with a .spec.coffee extension, are Jasmine tests, and have it recognize the Jasmine APIs those tests are using?
You can use predefined JS library stubs in Webstorm/PHPStorm/Idea
Open File > Settings...
Select Languages & Frameworks > JavaScript > Libraries
Click on Download...
https://i.stack.imgur.com/GZOvM.png
Swich to TypeScript community stubs
Find karma-jasmine (originally under the name jasmine) (If this does not work, try jasmine instead)
Click on Download and Install
https://i.stack.imgur.com/WS648.png
I am using this setup with Jasmine 2.0
On a mac with webstorm 2016.1.1 i did the following :
Open Preferences (webstorm->preference or [command + ,] ) Go to libraries and frameworks -> javascript -> libraries download select 'jasmine - DefinitelyTyped' from the list
https://i.stack.imgur.com/TbOko.png
jasmine
library using IntelliJ 2016.3 on a Windows machine and it worked, even without restarting.
Note, if you are using a Code Quality Tool such as JSHint with WebStorm, adding the global jasmin/karma-jasmine library did not get rid of the JSHint errors.
You need to access the JSHint settings via WebStorm's menu system (Lang & Frameworks>JavaScript>Code Quality Tools>JSHint) and click the checkbox to enable it know which environment it is running in.
https://i.stack.imgur.com/zczXm.png
Using TypeScript (and Angular2) you just need to enable the TypeScript compiler in the WebStorm Settings ...
Settings > Languages & Settings > TypeScript ...
Under the Compiler heading tick ...
Enable TypeScript Compiler ...
(I also clicked the use tsconfig.json radio)
Jasmine methods will now be recognised
WebStorm
compiling my TypeScript
since I am using Webpack
.
new project
as an Angular CLI
project then it recognizes them. I am not sure what is different.
This could also be caused by a missing dependency (if you're developing in TypeScript).
Make sure you've installed @types/jasmine
npm install --save-dev @types/jasmine
If you encounter this issue after having generated a project using the Angular CLI
then go to File -> Settings -> Languages & Frameworks -> JavaScript -> Libraries
and check {your-project-name}/node_modules
.
To find the answer to this, I ran DiffMerge on my project root and a new Angular CLI project created in Webstorm that properly detected jasmine types.
What I found is that the tsconfig.json
and tsconfig.spec.json
files from my project defined typeRoots
and types
, whereas the other project did not.
https://i.stack.imgur.com/wyLwK.png
The behavior of the typeRoots
option is:
If typeRoots is specified, only packages under typeRoots will be included.
Types
behaves a similar way.
Typescript documentation goes on to say:
By default all visible ”@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible.
So, for my project, this behavior is good enough for me. Deleting typeRoots
and types
from both my tsconfig.json
and tsconfig.spec.json
files solved this immediately.
Yes, jasmine was declared under types
in tsconfig.spec.json
. Yes, it was set to extend tsconfig.json
.
In this case, it didn't matter. One day it just stopped working. Possibly due to a Typescript upgrade, but I can't say for certain. If anyone knows why, please leave a comment below, I'm curious.
Success story sharing