How to test component in testing-library?

[dtokarczyk]

This is my main component. When I click on the button popover shows notifications. Let's see...

const NotificationDropdown = ({ unread = 0 }) => (
  <PopupState variant="popover">
    {popupState => {
      const { isOpen } = popupState

      return (
        <>
          <Button open={isOpen} unread={unread} {...bindTrigger(popupState)} />
          <Popover
            {...bindPopover(popupState)}
            anchorOrigin={makeOrigin('bottom', 'center')}
            transformOrigin={makeOrigin('top', 'center')}
          >
            <Notifications data-testid="notification-content" />
          </Popover>
        </>
      )
    }}
  </PopupState>
)

I tried write tests for that:

 const Component = ({ unread }) => (
    <>
      <NotificationDropdown unread={unread} />
      <span data-testid="somewhere">For click action</span>
    </>
  )

  it('should be closed after click somewhere', async () => {
    render(Component)

    clickElementByTestId('notification-btn')
    const contentNotification = screen.queryByTestId('notification-content')

    expect(contentNotification).toBeInTheDocument() // Good
    clickElementByTestId('notification-btn')
    expect(contentNotification).not.toBeInTheDocument() // Fail! The document still exits.
  })

Maybe it's an issue with animation (during the assertion component it's in the animation process). But I tried delay assertion for example:

    jest.advanceTimersByTime(2000)

    await waitFor(() => {
      expect(contentNotification).not.toBeInTheDocument()
    })

But I got the same results.

How to fix it?

[jedwards1211]

Sorry for the delay. If you want clicking the button again to close the popover then you can use bindToggle instead of bindTrigger, which keeps the popover open when clicked. (Though you can't typically click it again while the popover is open because the popover has an invisible backdrop that intercepts the click and calls its onClose handler.)

I'm actually not sure how to trigger a backdrop click in an automated test, right now my own tests call the callback functions directly. I'll investigate this further...

Poppers don't have a backdrop, so users would actually see different behavior between bindTrigger and bindToggle (I assume this is why I created these separate functions in the first place?) I'll think about how to make this less confusing.