The @testing-library/jest-dom library provides a set of custom jest matchers that are handy for testing the DOM state. Rather than manipulating and checking the state of the DOM directly, it allows you to perform various checks on the DOM API in a much more declarative and readable way.
For instance, you could verify whether an element has a specific attribute, whether an element is visible, or if an element contains another element as a descendant. It also lets you check an element's text content or style, whether it has focus or not, and much more. These abilities make it an essential tool for enhancing productivity and maintainability in testing JavaScript applications.
To utilize the @testing-library/jest-dom, first, add it to your project's devDependencies using either npm or yarn:
npm install --save-dev @testing-library/jest-dom
or
yarn add --dev @testing-library/jest-dom
Then, import @testing-library/jest-dom in your test setup file, and it's ready to use:
import '@testing-library/jest-dom'
For instance, if you want to check if an element is in the document, you can do it like this:
expect(getByTestId(document.documentElement, 'html-element')).toBeInTheDocument()
Or if you want to check whether an element has a specific attribute, that can be done like this:
const button = getByTestId('ok-button')
expect(button).toHaveAttribute('disabled')
expect(button).toHaveAttribute('type', 'submit')
Many more matchers are available. They allow you to assert various things about the state of the DOM, avoiding all the repetitive patterns that arise in doing so.
For detailed documentation, list of all available matchers, and further usage examples, refer to the GitHub repository of @testing-library/jest-dom. The repository provides a comprehensive reference to every function available in the library and offers additional context and insights that are beneficial when adding jest-dom to your testing workflow.
