Я пишу юнит-тестирование и e2e-тестирование для поповера в React. Я должен проверить, если всплывающее окно скрыто, когда я нажимаю за пределами компонента. Я использую Jest + Enzyme для модульного тестирования и Cypress для тестирования e2e. Кто-нибудь знает, как это сделать?
Я пытался в Cypress следующим образом.
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>