Angular指令单元测试中@HostListener事件参数为null的问题

我完全懂你遇到的困扰——你的MyDirective在正常应用里能稳稳拿到MouseEvent，但跑单元测试时，event参数却一直是null。其实问题根源很明确，咱们一步步拆解解决：

为什么会出现这个问题？ #

你当前测试里用了fixture.triggerEventHandler('click', null)，这里你主动把事件参数传成了null，指令收到的自然就是null。而且triggerEventHandler本质上更适合触发组件通过@Output定义的自定义事件，对于原生DOM事件，用原生元素触发事件才是更贴合真实场景的合规做法。

解决方案1：用nativeElement.dispatchEvent模拟真实事件（推荐） #

这是Angular官方测试文档认可的方式，完全模拟浏览器原生事件流，最贴近真实运行环境。修改你的测试代码如下：

it(`should listen to the click event`, () => {
  // 创建一个符合浏览器标准的MouseEvent对象
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });

  // 获取原生DOM元素并触发事件
  debugElement.nativeElement.dispatchEvent(clickEvent);
  fixture.detectChanges();

  // 举个断言例子：验证console.log是否收到了正确的MouseEvent
  const consoleSpy = spyOn(console, 'log');
  debugElement.nativeElement.dispatchEvent(clickEvent);
  expect(consoleSpy).toHaveBeenCalledWith(jasmine.any(MouseEvent));
});

解决方案2：正确使用triggerEventHandler传递模拟事件 #

如果想继续用这个方法，别传null，手动构造一个模拟的事件对象就行。不过要注意，这种方式是直接调用指令的事件处理方法，而非触发原生DOM事件：

it(`should listen to the click event`, () => {
  // 用Jasmine构造一个模拟的MouseEvent对象
  const mockEvent = jasmine.createSpyObj('MouseEvent', ['preventDefault'], {
    target: debugElement.nativeElement
  });

  // 触发debugElement上的click事件并传递模拟对象
  debugElement.triggerEventHandler('click', mockEvent);
  fixture.detectChanges();

  // 断言事件参数被正确接收
  const consoleSpy = spyOn(console, 'log');
  debugElement.triggerEventHandler('click', mockEvent);
  expect(consoleSpy).toHaveBeenCalledWith(mockEvent);
});

两种方案的区别 #

第一种方法更适合全面测试指令的真实表现，因为它完整模拟了浏览器的事件触发流程；第二种方法则更偏向快速验证事件处理逻辑本身，不需要依赖原生DOM事件的完整行为。

不管选哪种，都能解决你当前event参数为null的问题。

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