如何在测试中初始化带Signal输入的Angular组件？

问题背景 #

我有一个基于Angular 17.1 Signal输入实现的简单组件，代码如下：

@Component({
  selector: 'greet',
  template: `
    <span class="greet-text">{{firstName()}}</span>`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GreetComponent {
  firstName = input.required<string>();
}

想知道如何通过TestBed实例化该组件并为其Signal输入赋值？目前我在Angular仓库中找到的唯一方案是用一个不带Signal输入的组件包装它，代码示例如下：

describe('greet component', () => {
  it('should allow binding to an input', () => {
    const fixture = TestBed.createComponent(TestCmp);
    fixture.detectChanges();
  });
});

@Component({
  standalone: true,
  template: `<greet [firstName]="firstName" />`,
  imports: [GreetComponent],
})
class TestCmp {
  firstName = 'Initial';
}

难道必须写额外的包装组件才能测试这类新输入吗？

可行方案 #

其实除了包装组件的方式，还有更直接的测试方案：

方案1：使用setInput直接赋值 #

Angular 16+提供了ComponentRef.setInput方法，可以直接为组件的Signal输入赋值，无需额外包装：

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [GreetComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(GreetComponent);
    component = fixture.componentInstance;
    // 为Signal输入赋值
    fixture.componentRef.setInput('firstName', 'John');
    fixture.detectChanges();
  });

  it('should display the provided first name', () => {
    const greetElement = fixture.nativeElement.querySelector('.greet-text');
    expect(greetElement.textContent.trim()).toBe('John');
  });
});

方案2：创建组件时传入输入值 #

在通过TestBed创建组件实例时，也可以直接链式调用setInput传入输入参数：

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [GreetComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(GreetComponent);
    // 创建组件时直接设置输入
    fixture.componentRef.setInput('firstName', 'Jane');
    fixture.detectChanges();
  });

  it('should render the correct name', () => {
    expect(fixture.nativeElement.textContent.trim()).toBe('Jane');
  });
});

关于包装组件方案的说明 #

你提到的包装组件方案确实可行，但会增加额外代码。不过在测试复杂交互场景（比如多输入组合、父子组件通信逻辑）时，这种方式更贴近组件真实使用场景，也有其适用价值。

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