Jasmine单元测试：如何测试输入框的onChange事件？

你的测试代码有两个核心问题导致onChange没被调用：

1. 触发的事件不匹配 #

输入框绑定的是keyup事件，但你在测试里触发的是input事件，二者不对应，自然不会触发onChange。

2. Spy设置时机太晚 #

你先触发了事件，才给component.onChange设置spy，此时事件已经执行完毕，spy根本监不到调用过程。

修正后的测试代码 #

it('should call onChange function on keyup', fakeAsync(() => {
  // 先设置spy，确保在事件触发前生效
  spyOn(component, 'onChange');
  
  fixture.detectChanges();
  tick(); // 处理异步稳定化

  const inputEl = fixture.debugElement.query(By.css('input[formControlName="nonSelectedSkillCtrl"]')).nativeElement;
  
  expect(inputEl.value).toBe('');
  
  // 模拟输入值并触发keyup事件
  inputEl.value = 'f';
  inputEl.dispatchEvent(new Event('keyup'));
  
  fixture.detectChanges();
  tick();

  // 验证spy被调用
  expect(component.onChange).toHaveBeenCalledTimes(1);
  // 可选：验证调用时传入了event参数
  expect(component.onChange).toHaveBeenCalledWith(jasmine.any(Event));
}));

额外优化点 #

• 用query加属性选择器直接定位目标输入框，比queryAll取第一个更可靠，避免页面有多个输入框时定位错误。
• 在fakeAsync里用tick()代替whenStable().then()，代码结构更简洁，符合fakeAsync的使用规范。

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