In our project, we are currently utilizing jest for testing Angular applications. We have set up jest-preset-angular to run in debug mode within Visual Studio Code. However, a common issue we encounter is that the debugging process converts the spec.ts files to JavaScript before setting breakpoints, resulting in them not aligning with our desired locations.
Is there a way to configure the project so that we can debug our tests directly in TypeScript within Visual Studio Code?
We experimented with running Karma alongside Jest as the debugging experience in the browser with Karma is more user-friendly. Unfortunately, due to the numerous dependencies on Jest in our tests, this approach proved to be quite challenging.
launch.json
{
"name": "Tests",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
"stopOnEntry": false,
"args": ["-i", "-o"],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"env": {
"NODE_ENV": "test"
},
"console": "integratedTerminal",
"outFiles": ["${workspaceRoot}/dist/**/*"],
"sourceMaps": true
}
In the package.json file:
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/setupJest.ts"
],
"moduleDirectories": [
"node_modules",
"./"
],
"testResultsProcessor": "jest-teamcity-reporter",
"testMatch": [
"**/app/**/*.spec.ts"
]
The tsconfig.spec.json file defines:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"outDir": "../out-tsc/spec",
"module": "commonjs",
"types": ["jest", "node"]
},
"files": ["src/test.ts", "src/polyfills.ts"],
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}