Fix Jest describe/it/expected not recognised in Webstorm

Don’t you just hate it when Webstorm underlines functions as unknown, because it doesn’t recognise them? It turns out it is pretty simple to fix if you know how and have a TypeScript (ts) file with definitions available.

UPDATE
It turns out there is a much easier way of adding the definitions.

In File > Settings… > Languages & Frameworks > JavaScript > Libraries, click the button Download..., select ‘jest’ from the list of available definitions, click the button Download and Install. That’s it!

Webstorm rules!

First we need to install the Jest TypeScript definitions.

npm install --save-dev @types/jest

Then we need to add them in Webstorm by adding it as JavaScript library in the Settings.

File > Settings... >  Languages & Frameworks > JavaScript > Libraries

In the dialog click the Add.. button. The following dialog is opened.

Webstorm add JavaScript Library

In the dialog enter the following information.

Name: Jest
Visibility: Project

Then click on the + button and select the option Attach files....

Webstorm add JavaScript Library

The Jest TypeScript definitions are installed in the node_modules directory under your project directory. The Jest TypeScript definitions are installed in @types\jest\index.d.ts. Select the file and click the OK button.

That’s it! Now Webstorm recognises Jest describe/it/expect. O yeah!

Advertisements

Webstorm not recognising Vuetify component html tags

Recently I moved from VS Code to Webstorm. What a brilliant IDE. It really improved my development flow. One thing that has been irritating me is that the Vuetify component html tags are not recognised, which results in a s**t load of warning messages of unrecognised html tags.

After Googling around I found an issue on the Vuetify GitHub Issues that provides a simple workaround. All you need to do is create a file somewhere in the project that describes the Vuetify components. You don’t need to import the file. It just has to be accessible to Webstorm so that it can be analysed.

There is a fix in the works for the Vuetify api-generator that provides this file out of the box. Just checkout the Javascript and Typescript files.

I placed the Javascript file in my plugin directory naming it vuetify-fake-components-for-webstorm.js. After that all the warnings of unrecognised html tags disappeared like magic. Wooho!