Angular测试中调用next()时嵌套对象丢失问题求助

问题背景 #

测试Angular组件时，调用DataService的nextSidebarData推送带嵌套children数组的sidebar数据后，发现subscribe接收到的children变成了空数组，导致后续逻辑无法执行。

相关代码 #

DataService代码 #

private dataSource = new BehaviorSubject(this.data);
currentData = this.dataSource.asObservable();

nextData(data){
  this.dataSource.next(data);
}

组件待测试方法 #

changeSelectedData() {
  this.dataService.currentData.pipe(takeUntil(this.subscription))
  .subscribe(sidebar => {
    if (sidebar.length > 0) {
      // 业务逻辑
    }
  })
}

测试代码 #

it('should go inside the if', () => {    
  const selectedData = {
    key: 'host:1', 
    ip: '1',
    group: {name: 'group1'}
  };
  const service = TestBed.inject(DataService)
  const sidebar = [
    { children: [
        {key: 'host:', ip: '1', group: {name: 'group1'}},
        {key: 'host:', ip: '2', group: {name: 'group1'}},
        {key: 'host:', ip: '3', group: {name: 'group1'}}
      ]
    }
  ];
  service.nextSidebarData(sidebar); // 执行后children为空
  component.selectedData = selectedData;
  component.changeSelectedData();

  expect(component.selectedData).toEqual(something);
})

排查方向与解决办法 #

1. 数据引用被意外修改 #

BehaviorSubject推送的是数据的引用，如果服务内部或其他订阅者对原数据做了清空children的操作，就会导致你看到的结果。

修复：推送数据时传递深拷贝后的对象，切断引用关联：

// 修改DataService的nextData方法
nextData(data: any) {
  // 简单场景用JSON深拷贝（注意不支持循环引用）
  const clonedData = JSON.parse(JSON.stringify(data));
  this.dataSource.next(clonedData);
  
  // 复杂数据推荐用lodash的cloneDeep
  // import cloneDeep from 'lodash/cloneDeep';
  // this.dataSource.next(cloneDeep(data));
}

2. 测试时序颠倒 #

你现在是先推送数据，再调用changeSelectedData订阅流。BehaviorSubject会保存最新值，但如果takeUntil的subscription已经处于完成状态，订阅会立即终止，接收不到数据。

修复：调整时序，先订阅再推送数据，同时处理异步逻辑：

import { fakeAsync, tick } from '@angular/core/testing';

it('should go inside the if', fakeAsync(() => {    
  const selectedData = {
    key: 'host:1', 
    ip: '1',
    group: {name: 'group1'}
  };
  const service = TestBed.inject(DataService)
  const sidebar = [
    { children: [
        {key: 'host:', ip: '1', group: {name: 'group1'}},
        {key: 'host:', ip: '2', group: {name: 'group1'}},
        {key: 'host:', ip: '3', group: {name: 'group1'}}
      ]
    }
  ];
  
  // 先初始化订阅
  component.selectedData = selectedData;
  component.changeSelectedData();
  
  // 再推送数据
  service.nextSidebarData(sidebar);
  tick(); // 触发异步订阅逻辑执行

  expect(component.selectedData).toEqual(something);
}))

3. subscription提前完成 #

如果组件的this.subscription是一个已经调用过complete()的Subject，takeUntil会立即终止订阅，导致无法接收推送的数据。

修复：在测试前重置subscription：

beforeEach(() => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  // 重置为新的未完成Subject
  component.subscription = new Subject<void>();
  fixture.detectChanges();
});

afterEach(() => {
  // 测试结束后清理
  component.subscription.complete();
});

4. 服务初始值覆盖 #

检查DataService构造函数中的this.data初始值，如果初始值是[{children: []}]，且后续推送时没有完全替换数组，可能导致数据结构被初始值覆盖。

修复：确保初始值符合预期，或者推送时直接替换整个数组：

// DataService构造函数
constructor() {
  this.data = []; // 或者业务需要的初始结构
}

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