如何为组件ngOnInit中的document.body.setAttribute编写Angular单元测试？

要测试组件ngOnInit里document.body.setAttribute('data', 'data1')这行代码，直接在单元测试里检查document.body的属性值就行，步骤和代码如下：

测试思路 #

组件初始化时会执行ngOnInit，我们只需要触发组件初始化，然后断言body的data属性是否被设置为data1即可。同时要注意测试前后清理属性，避免影响其他测试用例。

完整测试代码示例 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component'; // 替换成你的组件路径

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

  // 配置测试模块
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 初始化前清除body的data属性，避免其他测试残留影响
    document.body.removeAttribute('data');
  });

  it('should set body data attribute to "data1" when ngOnInit runs', () => {
    // 第一次调用detectChanges会触发组件初始化，执行ngOnInit
    fixture.detectChanges();

    // 验证属性是否正确设置
    expect(document.body.getAttribute('data')).toBe('data1');
  });

  // 测试完成后清理，恢复body的初始状态
  afterEach(() => {
    document.body.removeAttribute('data');
  });
});

关键说明 #

• fixture.detectChanges()：Angular测试中，第一次调用这个方法会触发组件的初始化流程，包括执行ngOnInit钩子。
• 测试前后的清理操作：因为document是全局对象，如果不清理，这个属性会保留到下一个测试用例，可能导致测试结果不准确。
• 直接断言全局document对象：Angular单元测试环境允许直接访问浏览器的document对象，所以可以直接用document.body.getAttribute来验证结果。

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