This is the second part of the series. If you’re interested in the setup of Webpack in order to get rid of the confusingly long statements at the top of the files, I’d recommend reading the previous article.

In this section we’ll go through the specific configurations in connection with Jest and ESlint. These are the only libraries that I faced along the way of my journey with the Webpack feature. Let’s dive in!

Jest

It should be completely natural to write unit tests for the desired components in all cases.

However, if you’d also like to apply the shortened imports within the test files, then Jest should recognize and interpret the pre-defined Webpack aliases somehow. The exact solution is to edit the moduleNameMapper property.

The example is grabbed from the previous part in which I set the ~ symbol to be resolved as a path to the /src directory.

To clarify the lines above:

the RegEx looks for the imports that match with the pattern and interprets them to the given path on the right side,

the $1 sign refers to the rest of the import statement without the ~ symbol.

ESlint

You suspect that we should do something similar as before with Jest — and you’re absolutely right. What we need is a simple package in which the aliases can be set.

The documentation is pretty extensive and also comprises a few basic examples, thus let me be straight and introduce the solution briefly.

What it actually does is resolve the given string on the left side of the array to the one that is defined as the second element.