如何触发点击外部事件？

Question

我正在为 React 中的弹出窗口组件编写单元测试和 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

您只需单击身体上的某个位置即可：

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();

点击参考

Answer 2

取自其他答案，您可以：

cy.get('body').click(0,0);

无需添加命令，除非您要多次使用它

Answer 3

谢谢，这真的对我很有帮助，很棒的命令