[Bug]: 14.2.1 test fails now with error ReferenceError: ServerError is not defined

[davesmits]

Version

14.2.1

Steps to reproduce

Have a very simple component in angular

import { KeyValuePipe, NgFor } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';

@Component({
  selector: 'pi-snackbarpanel',
  templateUrl: './snackbarpanel.component.html',
  styleUrl: './snackbarpanel.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NgFor, KeyValuePipe],
})
export class SnackbarPanelComponent {
  constructor(
    public snackBarRef: MatSnackBarRef<SnackbarPanelComponent>,
    @Inject(MAT_SNACK_BAR_DATA) public data: ServerError,
  ) {}
}

export interface ServerError {
  title: string;
  errors: Map<string, string[]>;
}

and even more simple test

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MAT_SNACK_BAR_DATA, MatSnackBarModule, MatSnackBarRef } from '@angular/material/snack-bar';
import { provideNoopAnimations } from '@angular/platform-browser/animations';
import { beforeEach, describe, expect, it } from '@jest/globals';

import { SnackbarPanelComponent } from './snackbarpanel.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MatSnackBarModule],
      providers: [
        provideNoopAnimations(),
        {
          provide: MatSnackBarRef,
          useValue: {},
        },
        {
          provide: MAT_SNACK_BAR_DATA,
          useValue: {}, // Add any data you wish to test if it is passed/used correctly
        },
      ],
      schemas: [],
    }).compileComponents();

    fixture = TestBed.createComponent(SnackbarPanelComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

now when upgrading from 14.2.0 to 14.2.1 the test breaks with ReferenceError: ServerError is not defined

Expected behavior

I would expect upgrading from 14.2.0 to 14.2.1 wouldnt cause issues in this case and behavior stayed the same with 14.2.0

Actual behavior

getting an exception

  ● SnackbarPanelComponent › should create

    ReferenceError: ServerError is not defined



      at Object.<anonymous>.SnackbarPanelComponent.ctorParameters (src/app/modules/ontology.core/components/snackbarpanel/snackbarpanel.component.ts:280:15)
      at ReflectionCapabilities._ownParameters (node_modules/@angular/core/fesm2022/core.mjs:3636:78)
      at ReflectionCapabilities.parameters (node_modules/@angular/core/fesm2022/core.mjs:3662:31)
      at reflectDependencies (node_modules/@angular/core/fesm2022/core.mjs:6287:45)
      at Function.get (node_modules/@angular/core/fesm2022/core.mjs:30725:27)
      at getFactoryDef (node_modules/@angular/core/fesm2022/core.mjs:1355:28)
      at configureViewWithDirective (node_modules/@angular/core/fesm2022/core.mjs:12442:60)
      at initializeDirectives (node_modules/@angular/core/fesm2022/core.mjs:12175:9)
      at createRootComponent (node_modules/@angular/core/fesm2022/core.mjs:17178:5)
      at ComponentFactory.create (node_modules/@angular/core/fesm2022/core.mjs:17041:29)
      at initComponent (node_modules/@angular/core/fesm2022/testing.mjs:1976:51)
      at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:416:32)
      at Object.onInvoke (node_modules/@angular/core/fesm2022/core.mjs:16120:33)
      at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:415:38)
      at ZoneImpl.run (node_modules/zone.js/bundles/zone.umd.js:147:47)
      at NgZone.run (node_modules/@angular/core/fesm2022/core.mjs:15981:28)
      at _TestBedImpl.createComponent (node_modules/@angular/core/fesm2022/testing.mjs:1988:41)
      at Function.createComponent (node_modules/@angular/core/fesm2022/testing.mjs:1779:37)
      at Object.<anonymous> (src/app/modules/ontology.core/components/snackbarpanel/snackbarpanel.component.spec.ts:29:23)

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.22635
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
  Binaries:
    Node: 22.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    jest: ^29.7.0 => 29.7.0

[ahnpnl]

Hi, may I have a repo for this?

[davesmits]

never mind. just found a fix. The interface ServerError was in the same file as the SnackbarPanelComponent. Placed it in another file fixes the issue 🤷

[ahnpnl]

hmm weird, are you using isolatedModules: true in jest config?

[davesmits]

@ahnpnl no; not using that; should we?

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

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'jest-preset-angular',
  isolatedModules: true,
  moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '<rootDir>' }),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  reporters: ['default', ['jest-junit', { outputDirectory: './reports', outputName: 'junit-report.xml' }]],
  coverageReporters: ['text', 'html', 'cobertura'],
  coverageDirectory: './reports',
  collectCoverageFrom: ['src/**/*.{js,ts,html}'],
};

I am not really experienced with this all so trying to figure out how I isolated it in something I can share.

[ahnpnl]

https://github.com/thymikee/jest-preset-angular/tree/main/examples you can try using the example apps here to add your problem

[davesmits]

@ahnpnl I made a fork and added the code directly; Also had to install @angular/material
SAme problem: https://github.com/davesmits/jest-preset-angular/tree/main/examples/example-app-v18/src/app/snackbarpanel

[ahnpnl]

Thanks that would help a lot 🙏

[davesmits]

@ahnpnl do you need it in a PR or something or is it fine this way?

[ahnpnl]

oh a fork is fine for me 👍

[ahnpnl]

Instead of putting the interface to another file, you can put it above the class. It seems like the transformed codes are not happy when we put interface/type after usage.

This issue has been there even before 14.2.0

[davesmits]

with 14.2.0 in the example app

with 14.2.1

And putting it on top didnt it fix it for me

[ahnpnl]

hmm right, I think something has changed from Angular side. I need to check a bit further

[ahnpnl]

Another workaround you can try is switch to use inject function instead of constructor inject

[ahnpnl]

should be fixed with 14.2.2. The build artifact in 14.2.1 wasn't correct which causes the issue

[davesmits]

@ahnpnl thank you!