jest-preset-angular icon indicating copy to clipboard operation
jest-preset-angular copied to clipboard

[Bug]: Angular 14 source code can not debugged properly in WebStorm / IDEA

Open CSchulz opened this issue 2 years ago • 2 comments

Version

12.2.6 & 13.0.0-next.0

Steps to reproduce

  1. Clone this repo
  2. Install the dependencies for examples/example-app-v14
  3. Set break points in node_modules/@angular/forms/festm2020/forms.mjs, f.e. BaseControlValueAccessor.setProperty
  4. 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:

image

image

image

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

CSchulz avatar Jan 26 '23 17:01 CSchulz

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.

ahnpnl avatar Jan 27 '23 08:01 ahnpnl

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. image

CSchulz avatar Jan 27 '23 09:01 CSchulz