Jest.js 单元测试中元素上的调度文档单击事件

r7knjye2 于 9个月前发布在 Jest

关注(0)|答案(1)|浏览(109)

我需要对一个服务进行单元测试，该服务处理浏览器事件，比如元素内部/外部的点击。
在这个场景中，我试图在单元测试的文档中创建一个虚拟元素，在它上面发出一个鼠标点击事件，并验证从服务返回的目标是我的元素。但是，我无法获得元素上的点击事件来触发服务中的侦听器。

@Injectable({
  providedIn: 'root'
})
export class BrowserEventsService {
  private readonly document = inject(DOCUMENT);
  private readonly _documentClick$ = new Subject<EventTarget | null>();

  get documentClick$(): Observable<EventTarget | null> { return this._documentClick$.asObservable(); }

  constructor() {
    this.initDocumentClickListener();
  }

  private initDocumentClickListener(): void {
    fromEvent(this.document, 'click')
      .subscribe((event) => this._documentClick$.next(event.target));
  }
}

个字符
我如何在我的服务中正确地触发我的文档点击事件，目标是我的测试元素？

jestjs

来源：https://stackoverflow.com/questions/77642294/dispatch-document-click-event-on-element-in-unit-test

1条答案

按热度按时间

eulz3vhy1#

我在想，由于实际的单元测试文档在iframe内部运行，我们可能需要将元素附加到iframe内部。
您可以看到测试的DOM在root0 div内部运行的图片。
我们可能需要像这样修改createElement：
似乎你从来没有把它附加到DOM上。也许它不一定要在root0元素里面。

function createElement(): void {
    element = document.createElement('div');
    element.setAttribute('id', 'test-div');
    const newContent = document.createTextNode('Hello World');
    element.appendChild(newContent);
    // add this element after the root0 div
    document.getElementById('root0').appendChild(element);
  }

字符串
你也可以试着这样做：

element.click();

型
而不是dispatchEvent，看看是否有效。

的数据

赞(0）回复(0）举报 9个月前

我来回答

Jest.js 单元测试中元素上的调度文档单击事件

1条答案

相关问题

热门标签

最新问答