What is @testing-library/dom?
The @testing-library/dom package is a lightweight solution for testing DOM nodes (whether they are part of a web browser environment or not) in a way that simulates user actions. It aims to test the functionality of components in a user-centric manner. This library is part of the larger Testing Library ecosystem, which provides tools and utilities to work with React, Vue, Angular, and other frameworks by extending the base functionality provided in @testing-library/dom.
What are @testing-library/dom's main functionalities?
Querying DOM Elements
Allows querying DOM elements using text content, which simulates how users find elements on the page. This is useful for ensuring elements are present and contain the correct content.
const { getByText } = require('@testing-library/dom');
const element = getByText(document.body, 'Hello World');
Firing Events
Simulates user actions by firing events on DOM elements. This is crucial for testing interactive elements like buttons and forms.
const { fireEvent } = require('@testing-library/dom');
fireEvent.click(document.querySelector('button'));
Waiting for Elements
Provides utilities to wait for elements to appear or change, which is useful for testing asynchronous behavior like data fetching or animations.
const { waitFor } = require('@testing-library/dom');
await waitFor(() => getByText(document.body, 'Loaded'));
Other packages similar to @testing-library/dom
enzyme
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. It allows you to manipulate, traverse, and in some ways simulate runtime given the output. Enzyme's API is more focused on React specifically compared to @testing-library/dom which is framework-agnostic.
cypress
Cypress is a front end testing tool built for the modern web. It is built on a new architecture and runs in the same run-loop as the application being tested. Cypress also acts as an end-to-end testing framework, unlike @testing-library/dom which is more focused on unit and integration tests.
selenium-webdriver
Selenium WebDriver is a browser automation library. Most often used for testing web-applications, Selenium allows you to perform tasks as if you were the user of the application. It's more comprehensive for end-to-end testing across different browsers compared to @testing-library/dom which is more lightweight and focused on simulating user actions in a testing environment.