Skip to main content

Matchers in React Testing

When testing React components, it’s crucial to have expressive assertions that make tests more readable and maintainable. The @testing-library/jest-dom library extends Jest and Vitest with custom matchers specifically designed for DOM testing. One such matcher is toBeInTheDocument, which verifies if an element is present in the rendered output.

toBeInTheDocument Matcher​

Purpose​

The toBeInTheDocument matcher checks whether a given element exists in the DOM. It is useful for ensuring that a component has been rendered properly.

Usage​

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/vitest'; // Extends Jest/Vitest with custom matchers
import { describe, it, expect } from 'vitest';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders a specific element', () => {
    render(<MyComponent />);
    const element = screen.getByText('Hello, World!');
    expect(element).toBeInTheDocument();
  });
});

How toBeInTheDocument Works​

  • Relies on jsdom: Jest and Vitest use jsdom to simulate a browser environment in Node.js, making DOM-related assertions possible.
  • Part of @testing-library/jest-dom: This library provides a set of matchers that enhance Jest/Vitest, making tests more expressive and readable.

Other Useful Matchers from @testing-library/jest-dom​

1. toHaveTextContent​

Purpose: Checks if an element contains specific text content.

expect(element).toHaveTextContent('Hello, World!');

2. toContainHTML​

Purpose: Checks if an element contains specific HTML.

expect(element).toContainHTML('<span>Hello</span>');

3. toHaveClass​

Purpose: Verifies if an element has a specific CSS class.

expect(element).toHaveClass('active');

4. toHaveAttribute​

Purpose: Ensures an element has a given attribute with a specific value.

expect(element).toHaveAttribute('data-testid', 'custom-element');

5. toHaveStyle​

Purpose: Checks if an element has a specific inline style.

expect(element).toHaveStyle('color: red');

6. toHaveFocus​

Purpose: Verifies if an element is currently focused.

expect(input).toHaveFocus();

7. toBeVisible​

Purpose: Checks if an element is visible in the DOM.

expect(element).toBeVisible();

8. toBeEmptyDOMElement​

Purpose: Ensures an element has no child elements.

expect(element).toBeEmptyDOMElement();

9. toBeDisabled​

Purpose: Verifies if a form element is disabled.

expect(button).toBeDisabled();

10. toBeRequired​

Purpose: Checks if an input field is marked as required.

expect(input).toBeRequired();