React Testing Library is built on top of DOM Testing Library and encourages testing the app the way users interact with it.

It helps you:

• Avoid manual DOM setup and cleanup
• Write more readable, user-focused tests
• Reduce boilerplate
• Get better error messages and assertions

The Same Test with React Testing Library

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import MultiStepForm from './MultiStepForm'

test('completes the multi-step form successfully', async () => {
  const handleSubmit = jest.fn()
  render(<MultiStepForm onSubmit={handleSubmit} />)

  // Step 1
  expect(screen.getByText(/step 1/i)).toBeInTheDocument()

  await userEvent.type(screen.getByLabelText(/email/i), 'test@mail.com')
  await userEvent.click(screen.getByRole('button', { name: /next/i }))

  // Step 2
  expect(screen.getByText(/step 2/i)).toBeInTheDocument()

  await userEvent.type(screen.getByLabelText(/password/i), '123456')
  await userEvent.click(screen.getByRole('button', { name: /submit/i }))

  expect(handleSubmit).toHaveBeenCalledWith({
    email: 'test@mail.com',
    password: '123456',
  })
})

Query Priority

Quick Reference

Test a Form

Custom render

import { render as rtlRender } from '@testing-library/react'
import { ThemeProvider } from '../context/theme'

function render(ui, options) {
  return rtlRender(ui, {
    wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
    ...options,
  })
}

export * from '@testing-library/react'
export { render }