The path alias are not recognised in the react.js app

46 Views Asked by At

I have a React.js app by Typescript. Instead of unpacking the Webpack, I use Craco for my alias and the app works fine. Now, I try to setup Jest but it doesn't recognize the alias, and fails on the first one. I also used ts-node but the result is same. Could you please help me with this? Here are my codes:

jest.config.js

const config = {  
  setupFilesAfterEnv: ['<rootDir>/config/jest/setup.ts'], 
  moduleNameMapper: {
    '^@shared(.*)': ['<rootDir>/src/shared$1'],
}

craco.config.js

const path = require('path');

module.exports = {
  jest: {
    configure: {
      preset: 'ts-jest',
    },
  },
  webpack: {
    alias: {
      '@shared/*': path.resolve(__dirname, 'src/shared/*')
    }

ts.config.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "es2015",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["src/shared/*"],
    }
  },
  "include": [
    "src"
  ]
}

The error I get while running the craco test script:

Cannot find module '@shared/component/loading' from 'src/features/item/details/index.tsx'
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
0

There are 0 best solutions below