I'm presently learning React-Testing-Library.
I'd like to test mouse interaction with an element. Presently it's a bit unclear to me the difference between userEvent.click(element) and fireEvent.click(element). Are both recommended for use, and in the example below are they being correctly implemented?
const mockFunction = jest.fn(() => console.info('button clicked'));
const { getByTestId } = render(<MyAwesomeButton onClick={mockFunction} />);
const myAwesomeButton = getByTestId('my-awesome-button');
// Solution A
fireEvent(myAwesomeButton)
expect(mockFunction.toHaveBeenCalledTimes(1);
// Solution B
userEvent.click(myAwesomeButton);
expect(mockFunction).toHaveBeenCalledTimes(1);
Thanks in advance for any clarity.
Consider fireEvent. click , which creates a click event and dispatches that event on the given DOM node.
user-event is a companion library for Testing Library that simulates user interactions by dispatching the events that would happen if the interaction took place in a browser.
You NEVER need to wrap userEvent or fireEvent in act. They are *already* wrapped in act. Some have noticed that they see an "act warning" go away when wrapping these in an async act. The warning would go away just as well if you added: `await act(async () => {})` on the next line.
Using fireEvent. change() on a select element fires the event handler, but doesn't update state.
Behind the scenes, userEvent
uses the fireEvent
. You can consider fireEvent
being the low-level api, while userEvent
sets a flow of actions.
Here is the code for userEvent.click
You can see that depending of which element you are trying to click, userEvent
will do a set of different actions (e.g. if it's a label or a checkbox).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With