javascript - 如何触发外部点击事件？

Question

我正在为 React 中的 popover 组件编写单元测试和 e2e 测试。
当我在组件外部单击时，我应该检查弹出窗口是否隐藏。
我使用 Jest + Enzyme 进行单元测试，使用 Cypress 进行 e2e 测试。
有人知道怎么做这个吗？

我在柏树中尝试如下。

cy.get('[data-test-id="popover-container"]').click(-20, -20, {force: true});

但是点击的点实际上是在弹出窗口之外，但是它不起作用。 react-tiny-popover库用于显示弹出框，如下所示:

<Popover
      content={({ position, targetRect, popoverRect }) => (
        <ArrowContainer
          position={position}
          targetRect={targetRect}
          popoverRect={popoverRect}
          arrowColor={'#ccc'}
          arrowSize={10}
        >
          <div data-test-id="popover-container">
            <Content/>
          </div>
        </ArrowContainer>
      )}
      isOpen={visible}
      onClickOutside={() => hideOnOutsideClick && setVisible(false)}
      position={position}
    >
      <div onClick={() => setVisible(!visible)}>{children}</div>
    </Popover>

Answer 1

您可以简单地单击 body 上的某处:

Cypress.Commands.add('clickOutside', function(): Chainable<any> {
  return cy.get('body').click(0,0); //0,0 here are the x and y coordinates
});

在测试中:

cy.get('[data-test-id="popover-container"]').clickOutside();

click reference