My Journey

Like most, when I first started using Testing Library, I used Fire Event to test component interactions. After all, this API shipped with the library itself and was used in the test examples in the documentation. But I soon discovered that Fire Event had serious limitations. I would try clicking something and the expected effect did not happen. Why?

Browser Events

To understand this issue, we need to better understand browser events. When a user clicks something in their browser, multiple events are triggered — mouseDown, mouseUp, click, and focus. Similarly, when typing something, the keyDown, keyUp, and keyPress events all trigger! Because a single user interaction could trigger multiple events, developers have multiple options for implementation. This is where I ran into my issue.

Fire Event

Fire Event, unfortunately, requires you to use the method for the corresponding event handler to trigger. If an element has an onClick event handler, I have to use fireEvent.click; if an element has an onMouseDown event handler, I have to use fireEvent.mouseDown. In other words, I need to know the exact implementation of the event handler to successfully use fireEvent.

#react #jest #integration-testing #unit-testing #react-testing-library #react native