@testing-library/user-event
Advanced tools
The @testing-library/user-event package is a library built on top of @testing-library/dom that simulates user interactions with the DOM. It allows developers to write tests that mimic user behavior in a way that is consistent with how a user would use a web application. This helps ensure that tests are realistic and that the application will work as expected when real users interact with it.
Typing text into an input element
Simulates typing text into an input field or other element that can receive input.
userEvent.type(screen.getByRole('textbox'), 'Hello, World!')Clicking elements
Simulates a click event on a button, link, or any other clickable element.
userEvent.click(screen.getByText('Submit'))Selecting options in a select element
Simulates selecting an option from a dropdown select element.
userEvent.selectOptions(screen.getByRole('combobox'), 'optionValue')Uploading files
Simulates a file upload interaction on an input of type file.
userEvent.upload(screen.getByLabelText('Upload'), file)Tabbing through elements
Simulates tabbing through focusable elements on the page.
userEvent.tab()Selenium WebDriver is a browser automation library. It is more comprehensive than @testing-library/user-event as it can control the browser at a lower level, but it is also more complex and can be overkill for simple DOM interaction tests.
Cypress is an end-to-end testing framework that includes a rich set of methods for simulating user events. It is similar to @testing-library/user-event but is designed for full end-to-end testing and offers a complete testing environment with a browser-based UI.
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It is used for browser automation and can perform actions similar to @testing-library/user-event, but it operates at the browser level and can be used for tasks beyond testing, such as web scraping or generating pre-rendered content.
From testing-library/dom-testing-library#107:
[...] it is becoming apparent the need to express user actions on a web page using a higher-level abstraction than
fireEvent
user-event tries to simulate the real events that would happen in the browser
as the user interacts with it. For example userEvent.click(checkbox) would
change the state of the checkbox.
The more your tests resemble the way your software is used, the more confidence they can give you.
With NPM:
npm install --save-dev @testing-library/user-event @testing-library/dom
With Yarn:
yarn add --dev @testing-library/user-event @testing-library/dom
<input type="color" /> support.
#423Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
For questions related to using the library, please visit a support community instead of filing an issue on GitHub.
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Fire events the same way the user does
The npm package @testing-library/user-event receives a total of 5,889,806 weekly downloads. As such, @testing-library/user-event popularity was classified as popular.
We found that @testing-library/user-event demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
