Angular 4 Output组件测试未返回预期值问题排查

我帮你排查下这个问题哈！你遇到的测试里EventEmitter返回undefined的情况，大概率是测试时没给组件的@Input属性正确赋值，或者组件内部的onDelete()方法里引用输入属性时出现了拼写错误。

比如你的组件代码大概是这样的：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-checked',
  template: '<button (click)="onDelete()">Delete</button>'
})
export class CheckedComponent {
  @Input() inputValue: any; // 你的输入属性
  @Output() delete = new EventEmitter<any>();

  onDelete() {
    this.delete.emit(this.inputValue); // 发射输入属性值
  }
}

如果测试时只实例化了组件，没给inputValue赋值，那发射的自然是undefined。

下面给你两种可行的测试写法，按需选择：

方案1：手动实例化组件并赋值 #

这种写法简单直接，适合逻辑简单的组件：

import { CheckedComponent } from '../checked/checked.component';

describe('CheckedComponent', () => {
  it('emits the input value on delete', () => {
    let emittedValue: any;
    const testValue = 'sample-test-value'; // 准备测试用的输入值
    const component = new CheckedComponent();

    // 关键步骤：给组件的输入属性赋值
    component.inputValue = testValue;
    // 订阅输出事件，捕获发射的值
    component.delete.subscribe(value => emittedValue = value);

    // 调用删除方法
    component.onDelete();

    // 断言发射的值和我们传入的测试值一致
    expect(emittedValue).toEqual(testValue);
  });
});

方案2：用TestBed创建组件（Angular测试最佳实践） #

如果组件依赖其他服务或者需要变更检测，推荐用TestBed来初始化组件：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CheckedComponent } from '../checked/checked.component';

describe('CheckedComponent', () => {
  let component: CheckedComponent;
  let fixture: ComponentFixture<CheckedComponent>;
  let emittedValue: any;
  const testValue = 'sample-test-value';

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CheckedComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CheckedComponent);
    component = fixture.componentInstance;
    // 给输入属性赋值
    component.inputValue = testValue;
    // 订阅输出事件
    component.delete.subscribe(value => emittedValue = value);
    // 触发变更检测（确保组件状态更新）
    fixture.detectChanges();
  });

  it('emits the input value on delete', () => {
    component.onDelete();
    expect(emittedValue).toEqual(testValue);
  });
});

• 确认组件里的onDelete()方法中，发射的是正确的输入属性（比如有没有把this.inputValue写成this.value或者其他拼写错误）
• 确认测试中赋值的属性名和组件@Input装饰器里的名字完全一致（大小写也要注意！）

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