Introduction to User Events

Testing User Events

We can also test user events by writing the code that resembles the user interaction. We perform the asynchronous test using await and test() methods on specific elements. We can also use fireEvent to test the user events. The fireEvent creates the user events and dispatches the event to the DOM node. Let’s learn how to write a basic test using the userEvent method.

test('trigger the event on clicking the button', async () => {
   const user = userEvent.setup()
   render(<MyComponent/>)
   await user.click(screen.getByRole('button', name: /click me/))
})

We created a basic test that is an asynchronous method. The user event gets triggered when the user clicks on a button. We fetch the button element by its role using the getByRole() method, and then the trigger is using the user.click method.

fireEvent.focus(getByText('focus here'));

We can use fireEvent.focus() method directly on any element to test the focus functionality of the element when we click on it. We fetched the element with the text “focus here” using the getByText query.

User Event Options

The options allow us to adjust the behavior of the user events APIs and can be applied per setup(). There are many options available in the user events. Let’s take a look at a few options.

1. applyAccept
2. autoModify
3. delay
4. document
5. keyboardMap
6. pointerEventsCheck
7. pointerMap
8. skipAutoClose
9. skipClick
10. skipHover
11. writeToClipboard

Frequently Asked Questions

1. What is testing library user-event? 
   The User event is a companion library for the testing library that executes user events by triggering them based on the content and the interaction between user and browser.
2. What are examples of user events?  
   The user events are triggered according to the actions performed by the user. The actions can be clicking a button, loading a page, clicking on a link, etc.
3. What is the difference between fireEvent and user event? 
   The fireEvent dispatches and triggers the events that we define, but the user event triggers the events that are bound to happen when the user interacts with the browser.
4. What does a user event option do?  
   The options allow us to adjust the behavior of the user events APIs and can be applied per setup(). 
5. What function allows you to mimic browser events in your tests? 
   The utilities that allow us to create and dispatch browser events, such as click and change, are in the React Testing Library's fireEvent module. This module contains many different supported events. It can be imported from @testing-library/react fireEvent.

Key Takeaways

We have discussed the user events, testing, and user events options in this article. Now you can perform events using the options discussed in this article. 
Hey Ninjas! We hope this blog helped you understand user events. If you want to learn more, check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems. Please upvote our blog to help the other ninjas grow.

Happy Coding!