Unit testing React click outside component using Jest and react testing library

Question

I found this implementation here but its using enzyme.

Unit testing React click outside component

Adding an event to window does not work either:

window.addEventListener('click', () => {
      console.log('click on window');
    });

Has anyone came across this issue above using jest and "@testing-library/react"?

Did you try to run `fireEvent.click(document)`? – Gio Polvara Jul 11 '19 at 14:08 — Gio Polvara, Jul 11 '19 at 14:08
That worked. Thanks @GiorgioPolvara-Gpx – user992731 Jul 11 '19 at 15:26 — user992731, Jul 11 '19 at 15:26

eduardomoroni · Accepted Answer · 2022-03-24T14:40:13.453

29

as @Giorgio mentioned:

fireEvent.click(document)

//or

userEvent.click(document.body);

edited Mar 24 '22 at 14:40

answered Dec 30 '19 at 12:18

eduardomoroni

4,140
1
21
18

score 20 · Answer 2 · answered Mar 02 '21 at 20:23

20

I'd like to provide an up-to-date answer which follows the same principle as what @eduardomoroni proposed. The fireEvent hasn't worked for me and so I've managed to achieve it with the userEvent api.

userEvent.click(document.body);

Also, as typescript complains document cannot be passed to the click event handler. Instead, the body is a better solution.

Argument of type 'Document' is not assignable to parameter of type 'TargetElement'.

answered Mar 02 '21 at 20:23

Nemanja Milosavljevic

1,251
18
33

3

Please explain where does the mysterious `userEvent` comes from – vsync Jul 01 '21 at 14:09
fireEvent.click(document.body) worked for me – sidonaldson Jul 14 '21 at 08:15
@vsync It comes from the https://testing-library.com/docs/ecosystem-user-event/ – Nemanja Milosavljevic Jul 16 '21 at 07:02
1

This works! Thank you so much :) – Chen Ni Oct 29 '21 at 06:41
1

for me, I had to do `fireEvent.mouseDown(document);` – JRJurman Mar 09 '22 at 17:58

Unit testing React click outside component using Jest and react testing library

2 Answers2

Linked