reactjs - Testing onClose callback which is triggered by clicking outside component

Question

The popup has a click away listener which closes it when a click event occurs outside the component. I need to test that the popup has closed.

it.only('clicking outside popover calls on close callback ', async () => {
    const onCloseCallback = jest.fn();
    const { queryByTestId, getByTestId, getByLabelText } = render(
      <Popup
        onClose={onCloseCallback}
      />
    );

    fireEvent.click(document);

    await waitFor(() => {
      expect(queryByTestId('Popup')).toBeNull();
      expect(onCloseCallback).toHaveBeenCalledTimes(1);
    });
  });

The Popup.tsx component

<Popper
      open={open}
      anchorEl={anchorEl}
      data-testid="Popup"
      placement="bottom-end"
      modifiers={{
        arrow: {
          enabled: true,
          ref: arrowRef
        },
        flip: {
          enabled: false
        }
      }}>
      <span className={classes.arrow} ref={arrowRef} />
      <ClickAwayListener onClickAway={handleClose}>
        {children}
      </ClickAwayListener>
    </Popper>

question from:https://stackoverflow.com/questions/66045453/testing-onclose-callback-which-is-triggered-by-clicking-outside-component

Answer 1

Waitting for answers