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
– Gio Polvara

2019-07-11 14:08:39 +00:00
Commented Jul 11, 2019 at 14:08 — Gio Polvara
– Gio Polvara, Commented Jul 11, 2019 at 14:08
That worked. Thanks @GiorgioPolvara-Gpx

user992731
– user992731

2019-07-11 15:26:37 +00:00
Commented Jul 11, 2019 at 15:26 — user992731
– user992731, Commented Jul 11, 2019 at 15:26

eduardomoroni · Accepted Answer · 2022-03-24 14:40:13Z

42

as @Giorgio mentioned:

fireEvent.click(document)

//or

userEvent.click(document.body);

edited Mar 24, 2022 at 14:40

answered Dec 30, 2019 at 12:18

eduardomoroni

4,6401 gold badge24 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nemanja Milosavljevic · Accepted Answer · 2021-03-02 20:23:24Z

23

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 2, 2021 at 20:23

Nemanja Milosavljevic

1,3011 gold badge19 silver badges36 bronze badges

6 Comments

vsync Over a year ago

Please explain where does the mysterious userEvent comes from

sidonaldson Over a year ago

fireEvent.click(document.body) worked for me

Nemanja Milosavljevic Over a year ago

@vsync It comes from the testing-library.com/docs/ecosystem-user-event

Chen Ni Over a year ago

This works! Thank you so much :)

JRJurman Over a year ago

for me, I had to do fireEvent.mouseDown(document);

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related