Angular 5 Jasmine测试：组件模板编译失败，渲染内容为空求解决

嘿，我帮你排查下这个Angular单元测试的问题——你遇到的h1标签内容为空，大概率是模板没被正确触发渲染或者测试配置有遗漏，我整理了几个最常见的原因和修复方案：

1. 没触发变更检测，模板没渲染数据 #

Angular测试里，组件实例创建后不会自动渲染模板，必须手动调用fixture.detectChanges()触发变更检测，才能让组件的text变量和模板绑定生效。

补全并修复后的测试代码参考： #

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';

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

  // 初始化测试模块，声明要测试的组件
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent ] // 这步不能忘，否则框架不认你的组件
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    // 先给组件的text变量赋值
    component.text = '我是测试文本';
    // 关键一步：触发变更检测，让模板渲染数据
    fixture.detectChanges();
  });

  it('应该在h1标签里渲染text变量的内容', () => {
    const h1Element = fixture.nativeElement.querySelector('h1');
    expect(h1Element.textContent).toContain('我是测试文本');
  });
});

2. 测试模块漏声明了AppComponent #

如果TestBed.configureTestingModule的declarations数组里没加AppComponent，测试框架根本不知道要编译这个组件的模板，自然没法渲染变量，这是新手常漏的点。

3. 组件变量没赋值 #

如果组件本身的text没有默认值，测试里也没给它设置内容，那h1肯定是空的。记得在测试初始化或者用例里给component.text设个具体值。

4. 模板绑定写错了 #

检查下你的app.component.html里的h1绑定是不是正确的：

<!-- 正确的插值绑定方式 -->
<h1>{{ text }}</h1>

<!-- 别写成这种错误形式：这是给DOM元素的text属性赋值，不是显示内容 -->
<!-- <h1 [text]="text"></h1> -->

额外小提示 #

如果你的组件用了外部模板或样式文件，compileComponents()是异步操作，一定要用async或者await确保编译完成后再创建组件实例，不然也可能出问题。

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