Even though many helper extensions exist out there on VSCode to address the "dot-dot-slash recursive hell", the relational paths are painful to write if you have a folder structure with multiple layers. You may see some projects that are using absolute paths, and it looks cool right? So, why not? Let's use it. 😄
I ended up spending a lot of time configuring absolute paths for Jest (webpack part was rather easy), so I'd like to share how I made it work.
Before we start, "/" really matters when setting paths, TypeScript compiler will viciously throw errors on your face so if yours complains, see if there are any mistakes made on the forward slash or try to give some tweaks with "/" and "."
Suppose you have React app installed on your local machine using,
npx create-react-app myApp --template typescript
Step 1. Create a file tsconfig.path.json
in your root folder for your TypeScript compiler
let TS know what @page, @components, ... means (of course you can use other than @, it's up to you 🙂)
// tsconfig.path.json (in root)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@pages": ["pages"], // this doesn't work for @pages/smth
"@pages/*": ["pages/*"],
"@components": ["components"],
"@components/*": ["components/*"],
...
}
}
If you don't use Jest, putting just "@*": ["*"]
in "paths"
is going to work, but I prefer not to use it because of readability.
Step2. Add the path of tsconfig.path.json
in tsconfig.json
as "extends"
// tsconfig.json
{
"extends": "./tsconfig.path.json",
"compilerOptions": {
...
}
}
Now your TS compiler knows what @path
means.
You can write all what's in
tsconfig.path.json
intsconfig.json
, but I prefer to separate it because the part is used for a different(or unique per se) functionality.
Step3. Install craco
and ts-jest
# npm
$ npm install @craco/craco
$ npm install --dev ts-jest
# yarn
$ yarn add @craco/craco
$ yarn add --dev ts-jest
Step4. Create craco.config.js
in your root folder and configure it for your bundler and testing library to know what @paths
means
// craco.config.js (in root)
const path = require('path');
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig.path.json');
module.exports = {
webpack: {
alias: {
'@components': path.resolve(__dirname, 'src/components'),
'@pages': path.resolve(__dirname, 'src/pages'),
...
}
},
jest: {
configure: {
preset: 'ts-jest',
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
prefix: '<rootDir>/src/',
}),
},
},
};
There are other ways around to declare moduleNameMapper
in jest.configure
. You can find it by following the ts-jest
link below.
Step5. Add the path of craco.config.js
in package.json
to let your app know where to find craco configurations
{
...,
"cracoConfig": "craco.config.js"
}
Step6. Lastly, change your react-scripts
command to craco
in package.json
{
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
...
}
}
It's DONE! 🙌
Please comment down below if anything is mispresented.
I hope you find it helpful. ☕️ Happy Coding!
CRACO - NPM page
ts-jest Documentation - Paths mapping
Cover Photo by Rémi Jacquaint on Unsplash
Top comments (2)
For jest, maybe you could try specifying in package.json like below:
are you have any idea about doing this with cypress?