I have a project where my Jest ./test
directory is at the same level as the ./src/
directory. I’ve added path aliases to my TypeScript project, but my Jest tests’ path alias imports are throwing the following sorts of errors:
Cannot find module '#components/Graph' or its corresponding type declarations.ts(2307)
I have played around with some configurations and figured out that I can get the errors to be dismissed if I change my tsconfig.json file’s include
value to ["src", "test"]
as opposed to just ["src"]
. This is something I’m intentionally trying to avoid though since I don’t want test files to be included in my build artifacts.
The structure of my project looks (roughly) like this:
~/Project/
./src/*
./test/*
tsconfig.json
tsconfig.lint.json
package.json
jest.config.js
package.json:
{
"engines": {
"node": ">=18"
},
"scripts": {
"clean": "rm -rf dist && rm -rf node_modules",
"format": "npm run lint:fix && npm run prettier:fix",
"prebuild": "npm run format",
"build": "tsc -p tsconfig.json",
"lint": "eslint --cache src test",
"lint:fix": "eslint --cache --fix src test",
"prettier": "prettier --cache --check --ignore-unknown src test",
"prettier:fix": "prettier --cache --write --ignore-unknown src test",
"watch": "tsc -w",
"prepublishOnly": "npm run build && npm run test",
"test": "jest",
"posttest": "generate-coverage-data --language typescript"
},
"main": "./dist/index.js",
"exports": "./dist/index.js",
"files": [
"dist/",
"!**/test/**"
],
"devDependencies": {
"@amzn/eslint-config-lyria-react": "^1.0.0",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@tsconfig/node18": "^18.2.4",
"@types/jest": "^29.5.12",
"@types/react": "^18.3.3",
"@typescript-eslint/eslint-plugin": "^7.15.0",
"@typescript-eslint/parser": "^7.15.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-jest": "^28.6.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react-hooks": "^4.6.2",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"prettier": "^3.3.2",
"ts-jest": "^29.1.2",
"typescript": "~5.4.5"
},
"dependencies": {
"react": "^18.3.1"
}
}
tsconfig.json
{
"extends": ["@tsconfig/node18"],
"compilerOptions": {
"jsx": "react",
"declaration": true,
"outDir": "./dist",
"sourceMap": true,
"declarationMap": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"#components": ["src/components", "src/components/*"],
"#components/*": ["src/components", "src/components/*"],
"#types": ["src/types", "src/types/*"],
"#types/*": ["src/types", "src/types/*"],
"#utils": ["src/utils", "src/utils/*"],
"#utils/*": ["src/utils", "src/utils/*"],
},
},
"include": ["src"],
}
tsconfig.lint.json
{
"extends": ["./tsconfig.json"],
"include": ["src", "test"],
}
jest.config.js
const tsPreset = require('ts-jest/jest-preset');
module.exports = {
...tsPreset,
preset: 'ts-jest',
testMatch: ['<rootDir>/test/**/*.{test,spec}.{ts,js,tsx,jsx}'],
testEnvironment: 'jsdom',
coverageReporters: [
"cobertura",
"html",
"text"
],
collectCoverage: true,
coverageThreshold: {
global: {
statements: 80,
branches: 80,
functions: 80,
lines: 80,
},
},
collectCoverageFrom: [
'**/*.{ts,js,tsx,jsx}',
'!**/node_modules/**',
'!**/dist/**',
'!**/coverage/**',
'!jest.config.js',
'!.eslintrc.js',
'!.prettierrc.js',
'!src/**/index.ts',
],
// This doesn't work:
// globals: {
// 'ts-jest': {
// tsConfig: 'tsconfig.lint.json'
// }
// },
};
At this point, I’m at a loss as to what to try. I’ve tried specifically pointing to the tsconfig.lint.json
file instead of the standard tsconfig.json
file, but that doesn’t seem to work either. How can someone re-use path aliases if the ./test/
directory is alongside the ./src/
directory and the ./test
directory shouldn’t be included in the build artifacts?