Jest 27 - Paths not being honored

[michaelfaith]

🐛 Bug Report

We have a project with an Angular library, and are using tsconfig paths to help with import paths for components in the library. This worked great before the update, but is now failing with "Cannot find module" for all of the imports involving components from the library.

Snippet of our tsconfig

"paths": {
      "@fabric/components/*": [
        "./dist/components/*"
      ]
    }

Error log:

# content of error stacktrace :
 FAIL  src/app/component-demos/component-demos.component.spec.ts
  ● Test suite failed to run

    Cannot find module '@fabric/components/column-configuration-dialog' from 'src/app/component-demos/component-demos.component.spec.ts'

      38 | import { MatTreeModule } from '@angular/material/tree';
      39 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    > 40 | import { FabColumnConfigurationDialogModule } from '@fabric/components/column-configuration-dialog';
         | ^
      41 | import { FabConfirmationDialogModule } from '@fabric/components/confirmation-dialog';
      42 | import { FabGmLogoModule } from '@fabric/components/gm-logo';
      43 | import { FabMultiselectModule } from '@fabric/components/multiselect';

      at Resolver.resolveModule (../../node_modules/jest-resolve/build/index.js:311:11)
      at Object.<anonymous> (src/app/component-demos/component-demos.component.spec.ts:40:1)

envinfo

System:
    OS: Windows 10

Npm packages:
    jest: 27.0.1
    jest-preset-angular: 9.0.0
    typescript: 4.2.6

[ahnpnl]

This is because paths is tsconfig while Jest doesn't know that. You need to configure moduleNameMapper to tell Jest where to look, see our documentation here https://thymikee.github.io/jest-preset-angular/docs/guides/absolute-imports

[ahnpnl]

An example is

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  moduleNameMapper: {
    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/' }),
    '^lodash-es/(.*)$': '<rootDir>/node_modules/lodash/$1',
  },
};

[michaelfaith]

Did that change in 27? Because that worked fine with our setup previously. I'll give that a try. Thanks

[ahnpnl]

That is related to #910 which is listed as a breaking change, you can reuse the previous configuration is https://github.com/thymikee/jest-preset-angular/blob/v8.4.0/jest-preset.js

[ahnpnl]

I will update docs as well as CHANGELOG so it's clear about this breaking change.