Jest Module Import Issues with Angular 17 Complex Components

Context


I'm migrating an Angular 17 application from Karma to Jest. While extremely basic component tests are working, I'm encountering ESM-related issues when testing more complex components.

Working Setup


Basic components with minimal dependencies test successfully:

// Simple component test that works
// Basic component test that works
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DatePipe } from '@angular/common';
import { findByTestId } from '@app/testing/selectors';
import { PatientCardComponent } from './patient-card.component';

describe('PatientCardComponent', () => {
let component: PatientCardComponent;
let fixture: ComponentFixture<PatientCardComponent>;

const mockPatient = {
patientId: 123,
firstName: 'John',
lastName: 'Doe',
gender: 'Male',
dateOfBirth: '1990-01-01',
location: {}
};

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PatientCardComponent ],
providers: [ DatePipe ]
}).compileComponents();

fixture = TestBed.createComponent(PatientCardComponent);
component = fixture.componentInstance;
component.patient = mockPatient;
fixture.detectChanges();
});

it('should display patient information', () => {
const nameElement = findByTestId(fixture.nativeElement, 'patient-name');
expect(nameElement.textContent.trim()).toBe('John Doe');
});
});

Current Issue


When testing components with more dependencies (Material, services, etc.), I get ESM-related errors:

Must use import to load ES Module: /myrepo/node_modules/@angular/core/fesm2022/core.mjs

Current Configuration


Started pretty minimal but is getting a little insane. I keep resetting it and building out and eventually end up with a monster like this.

import type { Config } from 'jest';

const jestConfig: Config = {
preset: 'jest-preset-angular/presets/defaults-esm',
rootDir: 'src',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
transform: {
'^.+\\.(ts|js|mjs|html|svg)$': [
'jest-preset-angular',
{
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
useESM: true,
},
],
},
moduleNameMapper: {
'^@app/(.*)$': '<rootDir>/app/$1',
'^@env/(.*)$': '<rootDir>/environments/$1',
'^@services/(.*)$': '<rootDir>/app/services/$1',
'^@assets/(.*)$': '<rootDir>/assets/$1',
'ngx-webstorage-service': '<rootDir>/../node_modules/ngx-webstorage-service/bundles/ngx-webstorage-service.umd.js',
},
transformIgnorePatterns: [
'node_modules/(?!.*\\.mjs$|@angular|rxjs|tslib|ngx-webstorage-service)',
],
extensionsToTreatAsEsm: ['.ts'],
transformIgnorePatterns: [
'node_modules/(?!(@angular|rxjs|tslib|jest-canvas-mock|jspdf|ngx-webstorage-service))',
],
testPathIgnorePatterns: [
"<rootDir>/node_modules/",
"<rootDir>/dist/"
],
extensionsToTreatAsEsm: ['.ts', '.mts'],
testEnvironment: 'jsdom',
verbose: true,
};


I understand ESM support in Jest is still experimental, but there seems to be precedent for migration of Angular apps to Jest with TypeScript and ESM. My application is relatively standard - a basic Angular 17 app with minimal third-party dependencies, primarily using Angular Material and a few utility libraries. This makes me think I'm missing something in my configuration rather than hitting fundamental compatibility issues.

What I've Tried

1. Followed jest documentation for Jest including ESM Support
2. Followed the jest-preset-angular ESM documentation
3. Experimented with different transformIgnorePatterns configurations
4. Tried various combinations of ts-jest settings
5. Adjusted module name mapping patterns
6. Modified the preset to use ESM defaults

Environment

• Angular: 17.3.8
• jest-preset-angular: ^14.4.2
• jest: ^29.7.0,
• Node: 18.19.0

Continue reading...