如何为Angular组件的Output Signal编写单元测试？

针对你在子组件中定义的基于Signal的Output，要验证updatedBook.emit()是否被正确调用，可按以下步骤编写单元测试：

核心实现思路 #

利用Angular测试工具链（TestBed）创建组件实例，通过监听emit方法或订阅Output信号两种方式，验证调用updateBook时是否触发了信号发射。

方法一：使用Spy监听emit方法（推荐，适合验证调用行为） #

这种方式直接监听emit方法的调用情况，适合验证是否调用、调用次数及参数是否正确：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component.component';
import { Book } from './book.model'; // 导入你的Book类型定义

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent] // 声明子组件，或导入其所属模块
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should emit updatedBook when updateBook is called', () => {
    // 1. 构造测试用的Book对象
    const testBook: Book = { id: 1, title: '测试书籍' }; // 根据你的Book模型调整字段

    // 2. 监听output信号的emit方法
    const emitSpy = spyOn(component.updatedBook, 'emit');

    // 3. 调用子组件的updateBook方法
    component.updateBook(testBook);

    // 4. 验证emit方法被调用，且参数与传入的测试对象一致
    expect(emitSpy).toHaveBeenCalledWith(testBook);
  });
});

方法二：订阅Output信号验证发射值 #

如果需要直接验证发射的具体数据是否正确，可以订阅该Signal：

it('should emit correct Book object when updateBook is called', (done) => {
  const testBook: Book = { id: 1, title: '测试书籍' };

  // 订阅output信号，捕获发射的值
  component.updatedBook.subscribe((emittedBook) => {
    expect(emittedBook).toEqual(testBook);
    done(); // 异步测试需调用done标记完成
  });

  // 触发发射逻辑
  component.updateBook(testBook);
});

注意事项 #

• 确保在调用updateBook之前设置好Spy或订阅，否则会错过发射事件。
• 若组件存在依赖（如服务、其他子组件），需在TestBed.configureTestingModule中提供对应的模拟或真实依赖。
• Angular基于Signal的Output与旧版EventEmitter的测试逻辑兼容，emit方法同样可被Spy监听。

内容的提问来源于stack exchange，提问作者Irina S.