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)