Angular组件测试问题：subscribe方法回调无法触发设置Mock数据

组件的ngAfterViewInit()方法中存在对assemblyService.assembly的订阅，调试测试用例时无法进入该回调设置Mock数据，需调整测试逻辑确保回调被触发并设置指定Mock数据。

组件TS代码 #

import mockData from 'testing/mock-data.json';
public assembly: Subject<AssemblyNotification[]>;
constructor(private assemblyService: AssemblyService) {}

ngAfterViewInit() {
  this.assemblyService.assembly.subscribe(() => {
    this.dataSource.data = mockData;
  });
}

已修正语法错误的测试Spec代码 #

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

  const mockdata: any = require('testing/mock-data.json');
  const mockassemblyService = jasmine.createSpyObj(AssemblyService, []);
  mockassemblyService.assembly = new Subject<AssemblyNotification[]>();
  
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
        RouterTestingModule,
        MatTableModule,
        MatSortModule,
        NoopAnimationsModule,
      ],
      declarations: [MyComponent],
      providers: [
        { provide: AssemblyService, useValue: mockassemblyService },
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    mockassemblyService.assembly.next(mockdata);
    fixture.detectChanges();
  });

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

  it('should call subscribe method and set data', () => {
    expect(component.dataSource.data).toBe(mockdata);
  });
});

问题根源 #

测试中mockassemblyService.assembly.next(mockdata)的调用时机过早，此时组件的ngAfterViewInit尚未执行，订阅逻辑还未建立，发送的数据流无法被捕获。

修复方案 #

方案1：调整生命周期触发与数据流发送顺序 #

修改beforeEach中的执行顺序，先触发组件生命周期钩子完成订阅，再发送Mock数据：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    // 保持原有配置不变
  }).compileComponents();

  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  fixture.detectChanges(); // 触发ngAfterViewInit，完成订阅
  mockassemblyService.assembly.next(mockdata); // 发送数据，此时回调已生效
  fixture.detectChanges(); // 更新组件状态
});

方案2：在测试用例中单独控制数据流 #

针对目标测试用例单独处理，确保订阅建立后再发送数据，同时改用toEqual断言（数组/对象需比对内容而非引用）：

it('should call subscribe method and set data', () => {
  fixture.detectChanges(); // 触发生命周期，建立订阅
  mockassemblyService.assembly.next(mockdata);
  fixture.detectChanges(); // 触发组件更新
  expect(component.dataSource.data).toEqual(mockdata);
});

额外说明 #

• 原测试中使用toBe断言数组不严谨，因为toBe检查的是引用相等，而组件内的mockData与测试中的mockdata是两个独立引用，改用toEqual可比对内容是否一致。
• 若组件订阅逻辑依赖视图初始化后的元素，需确保fixture.detectChanges()正确触发ngAfterViewInit。

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