Angular测试Dialog组件时遇NullInjectorError：缺少MatDialogData提供者

错误原因 #

你的UserEnrollUpdateDialogComponent中注入了MAT_DIALOG_DATA（Angular Material Dialog用于传递数据的令牌），但测试模块未提供该令牌的模拟值，导致依赖注入容器无法找到对应依赖，触发空注入错误。另外原测试代码存在语法错误：beforeEach函数内matDialogStub定义后多了一个多余的闭合}，会导致代码执行失败。

修复步骤 #

1. 导入MAT_DIALOG_DATA：在测试文件顶部引入这个注入令牌
2. 提供MAT_DIALOG_DATA模拟值：在TestBed的providers数组中添加该令牌的模拟配置
3. 修正语法错误：移除matDialogStub定义后多余的闭合}

修正后的完整测试代码 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; // 新增MAT_DIALOG_DATA导入
import { FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { DatePipe } from '@angular/common';
import { UserEnrollUpdateDialogComponent } from './mgmt-user-management.component';
// 注意：若ConfirmDeleteModalComponent和MgmtUserManagementComponent不是当前组件的直接依赖，可移除以简化测试模块
import { ConfirmDeleteModalComponent } from './path-to-confirm-delete-modal';
import { MgmtUserManagementComponent } from './path-to-mgmt-user-management';

fdescribe('UserEnrollUpdateDialogComponent', () => {
  let component: UserEnrollUpdateDialogComponent;
  let fixture: ComponentFixture<UserEnrollUpdateDialogComponent>;

  beforeEach(() => {
    const matDialogStub = () => ({});      
    const formBuilderStub = () => ({ group: object => ({}) });
    const routerStub = () => ({});
    const datePipeStub = () => ({ transform: (value, string) => ({}) });
   
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [
        UserEnrollUpdateDialogComponent,
        ConfirmDeleteModalComponent,
        MgmtUserManagementComponent
      ],
      providers: [
        { provide: MatDialog, useFactory: matDialogStub },       
        { provide: FormBuilder, useFactory: formBuilderStub },
        { provide: Router, useFactory: routerStub },
        { provide: DatePipe, useFactory: datePipeStub },
        { provide: MAT_DIALOG_DATA, useValue: {} } // 新增MAT_DIALOG_DATA模拟值，可根据组件需求传入具体结构
      ]
    });
   
    fixture = TestBed.createComponent(UserEnrollUpdateDialogComponent);
    component = fixture.componentInstance;
  });

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

});

补充说明 #

• 如果你的Dialog组件需要特定结构的MAT_DIALOG_DATA，可以把useValue: {}替换成符合组件需求的模拟数据，比如useValue: { userId: 1, userName: 'Test User' }
• 若ConfirmDeleteModalComponent和MgmtUserManagementComponent不是UserEnrollUpdateDialogComponent的直接依赖（仅为父组件内的其他组件），可从declarations数组中移除，降低测试模块复杂度

内容的提问来源于stack exchange，提问作者Shobana VK