@ alias that points to the
src directory. I’m working on a project that I am using Babel but not Webpack. It turns out Babel has the cool plugin babel-plugin-module-resolver that also setup aliases.
Install the plugin.
$ npm i --save-dev babel-plugin-module-resolver
So we have the following directory structure.
│ └─ MyCoolService
│ └── index.js
│ └── MyCoolService.spec.js
In the spec file I want to test MyCoolService. Importing is messy.
import MyCoolService from '../src/MyCoolService'
I want to do it the Vue way.
import MyCoolService from '@/MyCoolService'
Can it be done? O yes,
babel-plugin-module-resolver to the rescue! Create a .babelrc file with the following contents.
Now we can import with the
@ alias. Alternatively as the root points to
src you can also import as follows.
import MyCoolService from 'MyCoolService'
How cool is that? Happy coding!
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.
It turns out there is a much easier way of adding the definitions.
Download..., select ‘jest’ from the list of available definitions, click the button
Download and Install. That’s it!
First we need to install the Jest TypeScript definitions.
npm install --save-dev @types/jest
In the dialog click the
Add.. button. The following dialog is opened.
In the dialog enter the following information.
Then click on the
+ button and select the option
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!