DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Absolute paths in React using craco (feat. TypeScript and ts-jest)
Brandon Wie
Brandon Wie

Posted on

Absolute paths in React using craco (feat. TypeScript and ts-jest)

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/*"],
      ...
    }
}
Enter fullscreen mode Exit fullscreen mode

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": {
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

Now your TS compiler knows what @path means.

You can write all what's in tsconfig.path.json in tsconfig.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
Enter fullscreen mode Exit fullscreen mode

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/',
      }),
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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",
    ...
 }
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
agnel profile image
Agnel Waghela

For jest, maybe you could try specifying in package.json like below:

"jest": {
  "moduleNameMapper": {
    "^@(.+)": "<rootDir>/src/$1"
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
muhammedmoussa profile image
Moussa

are you have any idea about doing this with cypress?

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt β€” available in multiple colors.