Angular 4应用编写Jasmine Karma测试用例遇问题求助

嘿，我之前在Angular测试里也踩过类似的坑，给你详细说说怎么解决这些问题：

你遇到的unable to set style of undefined，本质是测试环境里没有真实的DOM元素——TestBed创建的组件模板里并没有id="overlay"的元素，所以document.getElementById("overlay")返回undefined，自然没法设置style。

有两种靠谱的解决方式：

方式一：在测试模板中添加对应DOM元素 #

直接在TestBed配置时，给测试组件的模板加上需要的元素：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [YourComponent],
    // 如果你的组件原本有外部模板，可以在这里用template属性覆盖，添加需要的元素
    template: `
      <div id="overlay"></div>
      <!-- 其他组件需要的模板内容 -->
    `
  }).compileComponents();
});

it('should call overlayOn without error', () => {
  const fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  
  component.overlayOn(); // 现在能找到元素，不会报错了
  expect(document.getElementById('overlay')?.style.display).toBe('block');
});

方式二：模拟document.getElementById的返回值 #

如果不想修改测试模板，可以用Jasmine/Jest的spy来模拟document.getElementById，让它返回一个带有style属性的模拟对象：

beforeEach(() => {
  // 创建一个模拟的overlay元素，带空的style对象
  const mockOverlayElement = { style: {} } as HTMLElement;
  // 替换document.getElementById的实现，当传入"overlay"时返回模拟元素
  spyOn(document, 'getElementById').and.callFake((id) => {
    if (id === 'overlay') return mockOverlayElement;
    return null;
  });

  TestBed.configureTestingModule({
    declarations: [YourComponent],
  });
});

it('should set overlay display to block on overlayOn', () => {
  const fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  
  component.overlayOn();
  // 断言模拟元素的style.display被正确设置
  expect((document.getElementById('overlay') as HTMLElement).style.display).toBe('block');
});

小建议：尽量避免在组件里直接用document.getElementById，换成Angular的@ViewChild来获取元素，这样测试时更可控，也符合Angular的组件设计规范。比如：

// 组件里改成这样
@ViewChild('overlay') overlayElement!: ElementRef<HTMLElement>;

overlayOn() {
  this.overlayElement.nativeElement.style.display = 'block';
}

对应的模板里加<div #overlay></div>，测试时只需要确保这个元素存在或者模拟ElementRef即可。

处理@Input和@Output #

• @Input：直接在组件实例上赋值就行，记得调用fixture.detectChanges()触发变更检测：

  it('should process input value', () => {
    const fixture = TestBed.createComponent(YourComponent);
    const component = fixture.componentInstance;
    
    // 设置Input属性
    component.yourInputProperty = 'test data';
    fixture.detectChanges();
    
    // 断言组件处理了输入值
    expect(component.someDerivedValue).toBe('processed test data');
  });
  

• @Output：因为@Output是EventEmitter，你可以订阅它或者模拟它的emit方法：

  it('should emit event when action happens', () => {
    const fixture = TestBed.createComponent(YourComponent);
    const component = fixture.componentInstance;
    // 创建一个spy来监听输出事件
    const outputSpy = jasmine.createSpy('outputSpy');
    
    // 订阅Output事件
    component.yourOutputEvent.subscribe(outputSpy);
    
    // 触发组件里的逻辑，比如点击按钮或者调用方法
    component.triggerOutput();
    
    // 断言spy被调用，并且传入了预期的值
    expect(outputSpy).toHaveBeenCalledWith({ data: 'test' });
  });
  

模拟ViewChild #

如果@ViewChild指向的是DOM元素，确保测试模板里有对应的带模板引用变量的元素（比如<div #myElement></div>），调用fixture.detectChanges()后，组件实例上的ViewChild属性就会被赋值。如果需要模拟的话，直接给组件实例赋值即可：

it('should manipulate ViewChild element', () => {
  const fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  
  // 模拟ViewChild的ElementRef
  component.myElement = { nativeElement: { style: {} } } as ElementRef<HTMLElement>;
  
  component.updateElementStyle();
  expect(component.myElement.nativeElement.style.color).toBe('red');
});

如果@ViewChild指向的是另一个组件/指令，可以在TestBed里提供模拟组件/指令，或者直接替换成一个模拟对象：

// 模拟一个子组件
class MockChildComponent {
  someMethod = jasmine.createSpy('someMethod');
}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [YourComponent, MockChildComponent],
    // 如果原本的子组件是导入的，这里用MockChildComponent替换
  }).compileComponents();
});

it('should call child component method', () => {
  const fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  // 因为用了MockChildComponent，ViewChild会指向这个模拟实例
  fixture.detectChanges();
  
  component.callChildMethod();
  expect(component.childComponent.someMethod).toHaveBeenCalled();
});

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