A Summary of React Testing Library Verification (.toBeInTheDocument() / .toHaveTextContent())

Introduction

When writing tests with React Testing Library, this “verification step” is always required at the end (checking with expect whether the target screen matches the expected state).

This article therefore concisely summarizes the three essential matchers you should learn first.

1. Verify Element Existence: .toBeInTheDocument()

expect(element).toBeInTheDocument();

Verifies that the element is present on the screen.
Commonly used for checks like “Is the button displayed?” or “Is the error message shown?”.

2. Verify Text Content: .toHaveTextContent()

expect(element).toHaveTextContent(“Login successful”);

Verifies if the element contains this text.
Useful for checking if labels or message content is correct.

3. Verify if disabled: .toBeDisabled()

expect(button).toBeDisabled();

Verifies if buttons or input fields are in an unclickable state.
To verify enabled state, use .toBeEnabled().

Summary

• Existence check → .toBeInTheDocument()

• Text check → .toHaveTextContent()

• Disabled check → .toBeDisabled()