How to use path alias in a react project with Typescript + Jest

Question

I have been using jest for unit testing in my react project (typescript). Now I have enabled path alias in webpack and tsconfig. In order to use path alias with jest, I have followed this tutorial. But I am getting this error when I run my tests:

Here is my webpack configuration to enable path alias:

alias: {
  'ui': path.resolve(__dirname, 'src/framework/components/ui')
}

Here is my jest configuration to enable path alias (package.json)

"moduleNameMapper": {
    "ui": "<rootDir>/src/framework/components/ui/"
}

I also tried this version from the tutorial:

"moduleNameMapper": {
   "^ui/(.*)$1": "<rootDir>/src/framework/components/ui/$1"
}

Finally here is my tsconfig.json configuration:

"baseUrl": "src",
"paths": {
  "ui": ["framework/components/ui"]      
}

When I run my test, jest actually resolves the path alias. But it fails to pick up components exposed as default. For e.g this line:

import Button from './FormComponents/Button';

fails because 'Button' is exported as default from its module.

I hope my question makes sense. Thank you in advance for your help.

Maryn

Answer 1

Use ts-jest https://huafu.github.io/ts-jest/user/config/#jest-config-with-helper:

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest/utils');
// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
// which contains the path mapping (ie the `compilerOptions.paths` option):
const { compilerOptions } = require('./tsconfig');

module.exports = {
  // [...]
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */ )
};

Morgue

this works! I needed the prefix, but totally works, thanks so much! – Cru

umm, how do i do it with the base url ? – Shrewmouse

@gaurav5430, what is not working with your setup? Can you provide an example of your config? I'm guessing you need to change the prefix parameter and adjust it to your need – Latter

got the base url handling here: kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping , need to add modulePaths – Shrewmouse

Just a note - recent versions of ts-jest export pathsToModuleNameMapper from ts-jest instead of ts-jest/utils which was deprecated and removed – Million

Answer 2

Try

"moduleNameMapper": {
   "^ui/(.*)": "<rootDir>/src/framework/components/ui/$1"
}

It shouldn't have $1 in the regex as $1 is used in the replacement string to insert the captured text.

E.g. in your example, "Button" would be captured by the (.*) and then used in place of $1 in the replacement string.

Lavonda

Answer 3

In my case, I was only able to make it work after I've manually specified each directory path in tsconfig.json. For example:

    "paths": {
      "@*": [
        "./src/*",
      ],
      "@components/*": ["src/framework/components/ui/*"]
    }

Roughrider