Angular5组件测试报错：fixture.debugElement返回null，无法读取query属性

看起来你遇到的核心问题是组件测试时没有正确处理compileComponents()的异步特性，导致组件还没完成编译就尝试获取debugElement，最终出现Cannot read property 'query' of null的错误。

问题根源 #

在Angular 5中，compileComponents()是一个异步方法——当你使用非预编译的组件（比如未用Angular CLI的AOT编译）时，它需要时间去编译组件模板和样式。你的beforeEach没有等待这个异步操作完成就进入测试用例，导致TestBed.createComponent()创建的组件实例没有正确初始化，fixture.debugElement自然就成了null。

修复方案 #

把你的beforeEach改成异步模式，使用Angular测试提供的async函数来包裹测试逻辑，确保组件编译完成后再执行测试：

import {} from 'jasmine';
import { Component } from '@angular/core';
import { TestBed, ComponentFixture, async } from '@angular/core/testing'; // 引入async
import { By } from '@angular/platform-browser';
import { DropDownListComponent } from './dropDownList.component';

@Component({
  template: '<dropdown-list [valuesList]="valuesList" [selectedValue]="valuesSelected" ></dropdown-list>'
})
class TestComponent {
  valuesList = [{label: 'test_select', value:'test'}, {label: 'test_select2', value:'test2'}];
  valuesSelected = {label: 'test_select', value:'test'};
}

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

  beforeEach(async(() => { // 用async包裹异步编译逻辑
    TestBed.configureTestingModule({
      declarations: [TestComponent, DropDownListComponent]
    }).compileComponents(); // 等待编译完成后再进入测试用例
  }));

  it('should display selectedValue', () => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // 触发变更检测，确保组件完成渲染

    // 现在debugElement可以正常获取
    let de = fixture.debugElement.query(By.css(".value-container"));
    expect(de.nativeElement.textContent).toContain('test_select');
  });
});

额外检查点 #

• 确认DropDownListComponent的selector确实是dropdown-list，和测试组件模板里的标签完全一致，否则组件不会被正常渲染。
• 如果你已经使用了AOT编译（比如通过Angular CLI构建项目），可以直接去掉compileComponents()，因为组件已经提前预编译完成，也能避免异步编译带来的问题。

这样修改后，组件会在编译完成后再被初始化，fixture.debugElement就不会为null，你的查询和断言操作也能正常执行了。

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