jest-preset-angular
jest-preset-angular copied to clipboard
[Bug]: Angular 14 source code can not debugged properly in WebStorm / IDEA
Version
12.2.6 & 13.0.0-next.0
Steps to reproduce
- Clone this repo
- Install the dependencies for examples/example-app-v14
- Set break points in node_modules/@angular/forms/festm2020/forms.mjs, f.e. BaseControlValueAccessor.setProperty
- Debug the demo.testbed.spec.ts and try to run through the forms code.
Expected behavior
It should be possible to debug also the angular source code.
Actual behavior
The source code mapping points to different lines:



Additional context
It could be possible this bug belongs to ts-jest or other library. I think it is related to the transition of commonjs to esm of angular library. I haven't tested it with other esm libraries.
Environment
System:
OS: Windows 10 10.0.19045
CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
Binaries:
Node: 16.15.0 - C:\nodejs\node.EXE
npm: 8.5.5 - C:\nodejs\npm.CMD
npmPackages:
jest: ^29.4.1 => 29.4.1
Does it happen to other packages other than packages with Angular package format? If so, I think we should ask for help from Angular team to recheck Angular package format.
I have tried it with lodash-es and there is the same issue.
My adjusted jest.config.js:
const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;
// eslint-disable-next-line no-undef
globalThis.ngJest = {
skipNgcc: false,
tsconfig: 'tsconfig.spec.json',
};
const transformEsModules = [
'lodash-es',
'@angular',
];
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'jest-preset-angular',
globalSetup: 'jest-preset-angular/global-setup',
moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '<rootDir>' }),
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
transformIgnorePatterns: [
'/node_modules/(?!(' + transformEsModules.join('|') + ')/)',
],
};
During debugging you can not step into merge of lodash-es to check what is happening inside.
