如何触发点击外部事件？

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

从其他答案中获取，您可以：

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

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

Answer 2

你可以简单地点击身体的某个地方：

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

点击参考