如何在Angular指令的Jasmine单元测试中触发单击事件？

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyDirective } from './my.directive';

describe('MyDirective', () => {
  let fixture: ComponentFixture<any>;
  let directive: MyDirective;
  let element: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyDirective]
    });

    fixture = TestBed.createComponent(TestComponent);
    directive = fixture.componentInstance.directive;
    element = fixture.nativeElement.querySelector('.my-element');
  });

  it('should trigger click event', () => {
    spyOn(directive, 'onClick');

    const event = new MouseEvent('click');
    element.dispatchEvent(event);

    expect(directive.onClick).toHaveBeenCalled();
  });
});

@Component({
  template: '<div class="my-element" (click)="directive.onClick()"></div>'
})
class TestComponent {
  @ViewChild(MyDirective)
  directive: MyDirective;
}