Angular组件Spec测试报错：Cannot read property 'filter' of undefined

嘿，我一眼就看出问题出在哪了！这个错误本质是测试时组件的@Input() oData没有被赋值，导致后续this.dataSet变成了undefined，调用filter方法自然就炸了。

问题根源拆解 #

你组件里的逻辑是：

@Input() oData: NData[];
dataSet: NData[];

ngOnInit() {
  this.dataSet = this.oData; // 测试时oData是undefined，所以dataSet也成了undefined
}

// 然后在某个方法里调用
const records = this.dataSet.filter(...) // 这里就抛出TypeError了

而你的测试代码里，在调用fixture.detectChanges()（这个方法会触发组件的ngOnInit生命周期）之前，完全没给组件的oData传值，所以this.oData在测试环境里就是undefined，连锁反应导致dataSet也没值。

解决方案1：测试时主动传入oData（最直接的修复） #

在测试的第二个beforeEach里，fixture.detectChanges()之前，给组件的oData赋值模拟数据。修改后的测试代码如下：

describe('RelComponent', () => { 
  let component: RelComponent; 
  let fixture: ComponentFixture<RelComponent>; 
  // 先定义模拟的NData数据
  const mockOData: NData[] = [
    { attributes: { m_name: '测试1', m_id: 'id1' } },
    { attributes: { m_name: '测试2', m_id: 'id2' } }
  ];

  beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
      imports: [ AnimationsModule, ICModule, HttpClientTestingModule, RouterTestingModule, RandomMaterialModule], 
      declarations: [RelComponent], 
      providers: [ 
        { provide: BackendService, useClass: BackendServiceMock }, 
        { provide: ProfileService, useClass: ProfileServiceMock }, 
        { provide: UsedService, useClass: UsedServiceMock }, 
        OtherService, HttpClient, HttpHandler 
      ] 
    }).compileComponents(); 
  })); 

  beforeEach(() => { 
    fixture = TestBed.createComponent(RelComponent); 
    component = fixture.componentInstance; 
    // 关键步骤：在detectChanges之前传入oData
    component.oData = mockOData;
    fixture.detectChanges(); 
  }); 

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

解决方案2：给组件加防御性编程（更健壮的写法） #

如果你的组件在实际业务中可能遇到oData为undefined的情况，那最好在组件代码里做兜底处理，避免即使在生产环境也出现类似错误：

// 组件.ts里修改ngOnInit和filter调用的地方
ngOnInit() {
  // 给dataSet一个默认空数组
  this.dataSet = this.oData || [];
}

// 或者在调用filter前加判断
const records = (this.dataSet || []).filter(d => d.attributes).map(...).sort();

这样不管是测试还是生产环境，只要oData没传值，dataSet都会是一个空数组，filter方法就能正常调用了。

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