单元测试无法找到按钮返回null，求非fixture测试方案

一、解决按钮找不到（TypeError: Cannot read properties of null）的问题 #

核心错误点及修复步骤 #

1. 选择器拼写错误：模板中按钮的class是selector，测试代码里误用了.selectors（多了末尾的s），需修正查询选择器。
2. 未触发变更检测：给组件selectors赋值后，必须调用fixture.detectChanges()触发模板更新，否则DOM中不会渲染按钮元素。
3. 方法/输出名拼写不匹配：
   • 组件方法是selectselectors，测试里错误spy了selectSelector；
   • 组件Output是selectoSelected，测试里误写为selectorSelected；
4. 模板事件参数错误：模板中(click)事件传的是整个selectors数组，应改为当前循环项selector，否则方法接收参数错误。

修正后的代码示例 #

测试代码

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(SelectorComponent);
    component = fixture.componentInstance;
  });

  it('should emit selected selector when button is clicked', () => {
    const testSelectors: Selector[] = [{
      id: '1', 
      name: 'Child ',
      parent: 'Parent ',
      sortOrder: 1,
      icon: 'brain',
      selected: true, 
      children: []
    }];
    spyOn(component.selectoSelected, 'emit');
    
    component.selectors = testSelectors;
    fixture.detectChanges(); // 触发模板渲染
    
    const btn = fixture.debugElement.query(By.css('.selector'));
    btn.triggerEventHandler('click', null); 
    
    expect(component.selectoSelected.emit).toHaveBeenCalledWith(testSelectors[0]);
  });
});

组件代码

@Input() public selectors!: Selector[];
@Output() public selectoSelected = new EventEmitter<Selector>(); // 泛型与方法参数统一为Selector

constructor() { }

selectselectors(selector: Selector) {
  this.selectoSelected.emit(selector);
}

模板代码

<button
    class="selector"
    (click)="selectselectors(selector)"
    *ngFor="let selector of selectors"
>
    <div class="name">{{ selector.name }}</div>
</button>

二、无需Fixture的测试方式 #

如果仅需测试组件类的核心逻辑（如方法调用、Output发射），无需验证模板交互，可以直接实例化组件，跳过TestBed和Fixture：

describe('SelectorComponent', () => {
  let component: SelectorComponent;

  beforeEach(() => {
    component = new SelectorComponent();
  });

  it('should emit selector when selectselectors is called', () => {
    spyOn(component.selectoSelected, 'emit');
    const testSelector: Selector = {
      id: '1', 
      name: 'Child ',
      parent: 'Parent ',
      sortOrder: 1,
      icon: 'brain',
      selected: true, 
      children: []
    };

    component.selectselectors(testSelector);
    
    expect(component.selectoSelected.emit).toHaveBeenCalledWith(testSelector);
  });
});

这种方式适合快速验证组件业务逻辑，但无法覆盖模板与组件的交互场景（如按钮点击触发方法），这类场景仍需使用Fixture。

内容的提问来源于stack exchange，提问作者Julie Pham