DOM Matchers Introduction - React Testing Library DOM Matchers

React Testing Library DOM Matchers

Course covering all DOM matchers in React Testing Library, including `.toHaveAttribute()`, `.toBeChecked()` - learn them all to make your tests cleaner and easier to write

DOM Matchers

DOM Matchers Introduction

Current

DOM Matchers - Structure

Not started

DOM Matchers - Styling and Attributes

Not started

DOM Matchers - Element State & Visibility

Not started

DOM Matchers - Form Elements

Not started

DOM Matchers - Accessibility

Not started

Deprecated DOM Matchers

Not started

DOM Matchers Introduction

One of the most important parts of a test is writing assertions. With React Testing Library, components are rendered into a simulated DOM provided by jest-environment-jsdom (Jest) or the jsdom environment in Vitest.

You can then include @testing-library/jest-dom in your Jest or Vitest setup, which adds matchers to use with expect():

expect(someEl).toBeInTheDocument();

expect(someButton).toHaveTextContent(
  'click me'
);

expect(aLink).toHaveAttribute(
  'href',
  '/home'
);

In this course we will cover all of the DOM matchers. There are a lot of them so they are split up into a few lessons covering a few related ones at a time.

Loading full lesson content & code...

Ready to try running tests for this lesson?