TypeError: Cannot read properties of undefined (reading 'push') in Angular Material Dialog Testing

Question

The previous answers to this question do not resolve my issue.

I'm encountering a TypeError while testing a method in my Angular component that opens a dialog to delete a user. The error message states:

TypeError: Cannot read properties of undefined (reading 'push') at MatDialog.open (node_modules/@angular/material/fesm2022/dialog.mjs:598:26) at MatDialog.open (node_modules/@angular/material/fesm2022/dialog.mjs:598:26) at UserComponent.deleteUser (src/app/components/user/user.component.ts:108:35) at UserContext.apply (src/app/components/user/user.component.spec.ts:147:15) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:369:28) at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:2081:39) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:368:34) at ZoneImpl.run (node_modules/zone.js/fesm2015/zone.js:111:43) at runInTestZone (node_modules/zone.js/fesm2015/zone-testing.js:216:38) at UserContext. (node_modules/zone.js/fesm2015/zone-testing.js:234:32) at at UserContext.apply (src/app/components/user/user.component.spec.ts:147:15) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:369:28) at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:2081:39) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:368:34) at ZoneImpl.run (node_modules/zone.js/fesm2015/zone.js:111:43) at runInTestZone (node_modules/zone.js/fesm2015/zone-testing.js:216:38)

Here's the relevant portion of my UserComponent:

deleteUser(userId: number, userNickname: string): void {
  const dialogRef = this.dialog.open(DeleteDialogComponent, {
    height: '400px',
    width: '550px',
    data: { userId, userNickname },
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result) {
      const subscription = this.userService.deleteUser(userId).subscribe({
        next: () => {
          console.log("Ok!")
        },
        error: error => {
        }
      });
    }
  });
}

And here is my test setup:

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;
  let userServiceMock: jasmine.SpyObj<UserService>;
  let routerMock: jasmine.SpyObj<Router>;
  let dialogSpy: jasmine.SpyObj<MatDialog>;

  beforeEach(async () => {
    userServiceMock = jasmine.createSpyObj<UserService>('UserService', {
      deleteUser: of(1)
    });
    routerMock = jasmine.createSpyObj<Router>('Router', ['navigate']);
    dialogSpy = jasmine.createSpyObj('MatDialog', ['open']);

    await TestBed.configureTestingModule({
      imports: [UserComponent, MatDialogModule, BrowserAnimationsModule],
      providers: [
        { provide: UserService, useValue: userServiceMock },
        { provide: Router, useValue: routerMock },
        { provide: MatDialog, useValue: dialogSpy }
      ]
    }).compileComponents();

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

  it('should open modal and delete user', () => {
    const userId = 1;
    const userNickname = 'JohnSmith';

    component.deleteUser(userId, userNickname);

    const dialogRef = dialogSpy.open.calls.mostRecent().returnValue;
    dialogRef.afterClosed = jasmine.createSpy().and.returnValue(of(true));

    component.deleteUser(userId, userNickname);
    
    expect(userServiceMock.deleteUser).toHaveBeenCalledWith(userId);
  });
});

The line this.openDialogs.push(dialogRef); in the MatDialog implementation seems to be the source of the issue.

I suspect that the dialogRef is not being created correctly during the test, but I'm unsure how to resolve this.

How can I ensure that dialogRef is correctly mocked so that the openDialogs array is not undefined? Are there any adjustments I need to make to my test setup or the deleteUser method to avoid this error? Any insights or suggestions would be greatly appreciated!

Answer 1

The problem

Your UserComponent is importing MatDialogModule in order to be able to inject and use the MatDialog service. What happens is that standalone components have their own service injection. When the component is bootstraped in your TestBed, Angular will find a provider for MatDialog inside it's scope, so it will use that before resorting to the TestBed's scope, which has a correctly configured MatDialog mock. Hence the failing push call, which is part of the real MatDialog's implementation.

The solution

Remove the MatDialogModule import using TestBed's overrideComponent method, as follows:

    await TestBed.configureTestingModule({
      imports: [UserComponent, BrowserAnimationsModule],
      providers: [
        { provide: UserService, useValue: userServiceMock },
        { provide: Router, useValue: routerMock },
        { provide: MatDialog, useValue: dialogSpy }
      ]
    // Remove the module from the component so Angular will inject the TestBed's mock
    }).overrideComponent(UserComponent, {
        remove: {
          imports: [MatDialogModule]
        }
      })
      .compileComponents();

Note: Since UserComponent is standalone and MatDialogModule is specifically removed for the test, you don't need to import the real MatDialogModule in the test file. The MatDialog mock provided in the TestBed will be the one injected.