Jest Tests Failing - "Cannot find module 'apollo-angular'"

[PruessnerN]

Hello!

I'm in the processing of upgrading from Angular 12 to Angular 14 (yes I know 15 was released recently haha...). I'm having the hardest time getting my tests to function. I ran all of the migrations via Nx and they were successful. However I'm still receiving the same error. I've been at this issue for over a week now and could really use some insight. My application builds and runs fine. But tests are not seeing a specific apollo-angular module in my node_modules folder:

Cannot find module 'apollo-angular' from '../data-access-team/src/lib/team/services/team-graphql/team-graphql.service.ts'

 > 1 | import { Injectable } from '@angular/core';
 > 2 | import { Apollo, ApolloBase, gql, MutationResult } from 'apollo-angular';
     | ^
   3 | import { Observable } from 'rxjs';
   4 | import { map, tap } from 'rxjs/operators';

I'm not finding much on SO regarding this issue.. But any test that uses the apollo-angular as a dependency are failing now.
Here the relevant package versions:

"ts-jest": "^29.0.3",
"typescript": "4.8.4",
"jest": "28.1.1",
"jest-preset-angular": "^12.2.2",
"apollo-angular": "^4.1.0",
"@apollo/client": "^3.7.1",
"graphql": "^16.6.0",
"graphql-ws": "^5.11.2",

I'm trying this on both node 14 and 16.

I read something about apollo-angular using mjs and tried a few things to allow for that. But to be frank, I don't know much about mjs/ES modules and how it impacts jest.

I've and tried a few things but nothing seems to have worked:
https://thymikee.github.io/jest-preset-angular/docs/11.1/guides/angular-13+/

I've also tried changing the transformIgnorePatterns property in the jest.config.ts for the library I'm working in to this pattern:

transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|apollo-angular)'],

This was recommended by a few SO/forum posts. However I have had no luck with this solution.

Not sure if anyone has run into this before.. but hoping for some insight/ideas?

Any help would be greatly appreciated.

[PruessnerN]

A solution has appeared! After a ton of research, I found that adding the following resolver to my jest.config.ts allowed the tests to execute successfully.

/* eslint-disable */
import { pathsToModuleNameMapper } from 'ts-jest';
const { paths } = require('../../../tsconfig.base.json').compilerOptions;

export default {
  displayName: 'shared-data-access-auth',
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['../../../jest-setup.ts'],
  moduleNameMapper: pathsToModuleNameMapper(paths, {
    prefix: '<rootDir>/../../..',
  }),
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
    },
  },
  transform: {
    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
  },
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
};

The key factors of this fix were the transformIgnorePatterns of ['node_modules/(?!.*\\.mjs$)'], and the resolver of 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',

Hope this helps someone else!