Jest not finding alias path

Question

I recently created an alias path to import my components so I can avoid importing components like this ../../../../componentFolder and instead do @src/componentFolder. My issue is that my unit tests stopped working as it's not finding the paths to import the components. Below how my file structure is.

webpack.config.js
tsconfig.json
client
├── jest.config.js
|   tsconfig.json
├── src
│   ├── AgentsView
│   |   ├── AgentsView.tsx
│   ├── OtherComponent
│   |   ├── OtherComponent.tsx
├── test
│   ├── AgentsView
│   |   ├── AgentsView.spec.tsx
│   ├── OtherComponent
│   |   ├── OtherComponent.spec.tsx
│   ├── tsconfig.json

My webpack.config.js is like this

module.exports = {

resolve: {
    extensions: ['.mjs', '.js', '.ts', '.tsx', '.scss'],
    alias: {
        '@src': path.resolve(__dirname, './client/src/'),
        '@components': path.resolve(__dirname, './client/src/components/'),
    }
}, ...etc

and my tsconfig.json I added 2 paths to it.

"compilerOptions": {
    "jsx": "react",
    "sourceMap": true,
    "moduleResolution": "node",
    "baseUrl": "client",
    "paths": {
        "@src/*": ["./src/*"],
        "@components/": ["./src/components/*"]
    },
},
"exclude": ["node_modules", "build"]

So, I tried to update my ./client/jest.config.js as follows:

module.exports = {
  transform: {
      '^.+\\.tsx?$': 'ts-jest'
  },
  globals: {
      'ts-jest': {
          tsconfig: './client/test/tsconfig.json',
          diagnostics: {
            ignoreCodes: [151001]
          }
      }
  },
  setupFilesAfterEnv: ['./test/toolkit/Setup.js', 'jest-canvas-mock'],
  testRegex: '/test/.*spec\\.(jsx?|tsx?)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  reporters: ['default', 'jest-junit'],
  collectCoverage: true,
  coverageDirectory: '../target/coverage/client',
  coverageReporters: ['lcov'],
  restoreMocks: true,
  moduleNameMapper: {
    '^@src(.*)': './src',
    '^@components(.*)': './src/components',
  }
};

and my client/test/tsconfig.json is

"compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "../",
    "paths": {
        "~/*": ["./*"],
        "@src/*": ["./src/*"],
        "@components/": ["./src/components/*"]
    }
},

But I still getting the errors when I run the tests. I am not sure exactly where I am missing here as this structure with multiple tsconfig files can be confusing.

Answer 1

Your jest.config.js is wrong. Module name mapper should be :

  moduleNameMapper: {
    '^@src/(.*)': '<rootDir>/src/$1',
    '^@components/(.*)': '<rootDir>/src/components/$1',
  }

Remember, the key is a regular expression, so the value can use "$1" to use matching string.

Btw, notice I used <rootDir>/src instead of ./src, I remember having issues with jest if I didn't use rootDir.

Answer 2

I use ts-jest, tsconfig-paths, and tsconfig-paths-jest with Typescript code, so it can read the paths from my tsconfig.json file, and not have me set the values in 2 different locations. These are then in my package.json as devDependencies.

const tsconfig = require('./tsconfig.json');
const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);

module.exports = {
    moduleNameMapper,
    preset: 'ts-jest',
    testEnvironment: 'node',

    rootDir: './',
    ...
}