Introduction
When we interact with any page or element in a browser, it triggers an event to execute the expected action or functionality. These events are called “User Events”. 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. It makes triggering events easier for users and finds bugs. You can install the user event using the following commands.
npm install --save-dev@testing-library/user-event@^14.0.0-beta
// using npm
yarn add --dev @testing-library/user-event@^14.0.0-beta
// using yarn
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 get the button by its role using the getByRole() method, and then the trigger is using the user.click method.
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.
applyAccept
This option discards all the files that do not match the accept property when using the upload() function. The default value of the property will be set to true.
autoModify
We automatically apply modifier keys for characters when the caps lock is not active. This option allows us to choose whether to apply the automatic modification or not. The default value of the property is set to true.
delay
The delay between subsequent inputs like typing a series of characters or printing is set using this option. The default time will be 0 seconds.
document
The owner document on the element is set to the option by default if the API is called directly without setup. Otherwise, the global document is set to this option.
default: element.ownerDocument ?? global.documentkeyboardMap
This option consists of an array of the keys on the keyboard. The default keyboard is a standard QWERTY keyboard.
pointerEventsCheck
The pointer API includes a check if the pointer-events property of an element is none. This option defines how often the check should be performed by pointer events.
pointerMap
This option contains an array of all available pointer keys and allows to plug in different pointer devices.
skipAutoClose
The type() function automatically releases the keys pressed at the end of the function call. This option allows us to skip this feature and stop the release of keys. The default value is false.
skipClick
The type() method implies the click event on any element. This option allows us to skip this property of the type() method. The default value is false.
skipHover
The click() method moves the cursor to the target element first. This option can skip this feature and allows us to opt-out of it. The default value is false.
writeToClipboard
This option allows us to write the copied text or data to the clipboard. The default value is false when the APIs are called directly. The default value is true when the APIs are called on an instance from setup().
306+ registered