138

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?

Joe White
  • 94,807
  • 60
  • 220
  • 330
  • I have the same problem in 3.0 EAP. This is reason why I'm working in 2.1.5. – Microfed Nov 12 '11 at 23:55
  • @Microfed, so you're saying that 2.1.5 does automatically recognize Jasmine tests? Is this a bug that's already been written up? – Joe White Nov 13 '11 at 01:35
  • You should submit this as an issue at http://youtrack.jetbrains.net/issues/WI so that developers can address such cases in the future versions. – CrazyCoder Nov 12 '11 at 23:56

7 Answers7

241

You can use predefined JS library stubs in Webstorm/PHPStorm/Idea

  • Open File > Settings...
  • Select Languages & Frameworks > JavaScript > Libraries
  • Click on Download...

JavaScript Library settings

  • 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

enter image description here

I am using this setup with Jasmine 2.0

Samuel Neff
  • 73,278
  • 17
  • 138
  • 182
oujesky
  • 2,837
  • 1
  • 19
  • 18
  • I'm new to webstorm. What added functionality are you getting by doing this? – Mike Fisher May 03 '14 at 04:12
  • 1
    I think the only purpose is the autocomplete help (so the IDE do not need to process the library code and guess how the interface is defined). That is basically said here: http://www.jetbrains.com/webstorm/webhelp/javascript-libraries.html – oujesky May 05 '14 at 17:58
  • and what about mocha? – hellboy Sep 08 '14 at 11:39
  • I have no experience with mocha, but the library definition is available the same way as for jasmine – oujesky Sep 08 '14 at 13:23
  • 2
    its called karma-jasmine, they changed it just to help us find it – Andrzej Rehmann Dec 23 '14 at 19:03
  • 7
    Does not work for me. "describe", "beforeEach", "it" still appear with gray underline. – BuildTester1 Feb 19 '15 at 19:36
  • 36
    If you're not using karma, you can just pick the 'jasmine' library for download. That's what worked for me after trying karma-jasmine – Doug Seelinger Mar 03 '15 at 15:53
  • If you can't find it in the list, you already have it installed - enable it. If this does not get rid of the squiggles after exiting Settings, the remove and redownload karma-jasmine. – sennett Mar 07 '15 at 17:27
  • 1
    Installing just Jasmine also enables Webstorm to also recognise Jasmine methods – Udo Apr 09 '15 at 11:59
  • 1
    This worked for me in PhpStorm using mocha and expect.js – MisterBla Apr 27 '15 at 17:17
  • 22
    Even though I'm using karma, I had to download just _jasmine_ to make it work. _karma-jasmine_ didn't work. – Didier L Sep 14 '15 at 12:18
  • 1
    Using 'jasmine' library here works with TypeScript and Angular2 but causes a different error on the same Jasmine methods (regarding a missing files entry in tsconfig.json) - Adding the files entry fixed this BUT caused my TS files to stop auto compiling - the final much simpler solution is found in my answer below. – danday74 Sep 12 '16 at 14:29
  • 3
    Last step - restart IDE – Sava Jcript Dec 14 '16 at 19:26
  • I followed @oujesky solution but I was forced to downgrade @types/jasmine to 2.5.41 to make it work. I use NodeJS 10.15.0 and TypeScript 2.5.3. [source](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14569#issuecomment-279306281) – Bludwarf Jan 07 '19 at 20:08
30

On a mac with webstorm 2016.1.1 i did the following :

  1. Open Preferences (webstorm->preference or [command + ,] )
  2. Go to libraries and frameworks -> javascript -> libraries
  3. download
  4. select 'jasmine - DefinitelyTyped' from the list

Jasmine support added to webstorm

Eran
  • 1,628
  • 16
  • 31
  • 4
    It worked for me on mac, but I needed to close and restart WebStorm. – Jim Nov 02 '16 at 14:48
  • I have downloaded the `jasmine` library using IntelliJ 2016.3 on a Windows machine and it worked, even *without* restarting. – Jelle den Burger Dec 20 '16 at 07:54
  • I also had to change the "Type" from Global to Project. Double click the library name after installing it, then change the "Visibility" setting – providencemac May 31 '17 at 21:04
6

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.

JSHint setting

prasanthv
  • 2,442
  • 2
  • 21
  • 17
4

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

danday74
  • 52,471
  • 49
  • 232
  • 283
  • The issue with this solution is that I don't want `WebStorm` compiling my `TypeScript` since I am using `Webpack`. – theblang Sep 20 '16 at 03:42
  • Interestingly, if I make a `new project` as an `Angular CLI` project then it recognizes them. I am not sure what is different. – theblang Sep 20 '16 at 03:58
  • I use gulp to transpile my TypeScript, if you setup your tsconfig.json correctly then TypeScript will NOT generate output files, it will just validate them in the IDE. – danday74 Sep 20 '16 at 11:13
  • Worked for me. Don't forget to tick the tsconfig.json – Michael Kornelakis Oct 07 '16 at 17:42
  • This almost worked without errors for me. However, when I do this I get this error output from the Typescript compiler tab in WebStorm: Error:Error: Parse tsconfig error [{"messageText":"Unknown compiler option 'baseUrl'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'lib'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'typeRoots'.","category":1,"code":5023}] – Nikola Schou Feb 03 '17 at 10:33
  • I got the same complaint as you with the first answer: `corrisponding file not included in tsconfig.js`, but i already did what you suggested I do – Samuel Thompson Nov 22 '17 at 22:02
4

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
Brad Johnson
  • 1,776
  • 1
  • 20
  • 26
2

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.

theblang
  • 10,215
  • 9
  • 69
  • 120
0

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.

enter image description here

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.

MDMoore313
  • 3,233
  • 1
  • 23
  • 38