0

I'm not able to get trigger the outside click handler from my component inside a React Testing Library test. Runs fine on the client, so just a testing issue.

const Modal = ({ children, onClose }) => (
  <div role="presentation">
    <OutsideClickHandler onOutsideClick={onClose}>
      <div> modal stuff... </div>
    </OutsideClickHandler>
  </div>
)

it('should close modal when clicked outside', () => {
  const mockHandleClose = jest.fn()
  render(<Modal {...props} onClose={mockHandleClose} />)
  fireEvent.click(document)
  // userEvent.click(document.body)  -- Tried this as well with no luck
  expect(mockHandleClose).toBeCalled()
})

// Test output:
//    expect(jest.fn()).toBeCalled()
//    Expected number of calls: >= 1
//    Received number of calls:    0

I also tried targeting the "presentation" role div with no luck.

RTL Docs for testing a Modal (not OCH, but based off of their own pattern): https://testing-library.com/docs/example-react-modal

Code Sandbox: https://codesandbox.io/s/react-testing-library-demo-forked-g7su2i?file=/src/__tests__/hello.js

Referenced this SO post: Unit testing React click outside component using Jest and react testing library

Jadam
  • 1,650
  • 1
  • 19
  • 40
  • check this https://stackoverflow.com/questions/67930922/testing-library-react-clicking-outside-of-component-not-working – Sachila Ranawaka Oct 26 '22 at 19:01
  • @SachilaRanawaka been trying several variants of that example without luck so far. Thank you for the reference though. – Jadam Oct 26 '22 at 19:19

0 Answers0