React Testing Library integration in NextJS

Introduction

React Testing Library helps you check if your React components work correctly by simulating how users interact with them.

You want to make sure a button click changes the page as expected.

You need to verify that text appears after loading data.

You want to test a form to see if it accepts input and submits properly.

You want to catch bugs early by testing components before deploying.

You want to write tests that focus on what users see and do.

Syntax

NextJS

import { render, screen, fireEvent } from '@testing-library/react';
import Component from './Component';

test('description', () => {
  render(<Component />);
  const element = screen.getByText('some text');
  fireEvent.click(element);
  expect(something).toBe(someValue);
});

render shows your component in a test environment.

screen helps find elements like buttons or text.

Examples

This test checks if the text 'Hello World' appears when the Hello component renders.

NextJS

import { render, screen } from '@testing-library/react';
import Hello from './Hello';

test('shows hello message', () => {
  render(<Hello />);
  expect(screen.getByText('Hello World')).toBeInTheDocument();
});

This test clicks the 'Increment' button and checks if the count updates to 1.

NextJS

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter on button click', () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: 'Increment' });
  fireEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Sample Program

This example shows a simple toggle button component and a test that clicks the button to check if the text and aria-pressed attribute update correctly.

NextJS

import React, { useState } from 'react';

export default function Toggle() {
  const [on, setOn] = useState(false);
  return (
    <>
      <button aria-pressed={on} onClick={() => setOn(!on)}>
        {on ? 'Turn Off' : 'Turn On'}
      </button>
      <p>{on ? 'The switch is ON' : 'The switch is OFF'}</p>
    </>
  );
}

// Test file: Toggle.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Toggle from './Toggle';

test('toggles text when button is clicked', () => {
  render(<Toggle />);
  const button = screen.getByRole('button');
  expect(screen.getByText('The switch is OFF')).toBeInTheDocument();
  fireEvent.click(button);
  expect(screen.getByText('The switch is ON')).toBeInTheDocument();
  expect(button).toHaveAttribute('aria-pressed', 'true');
});

Important Notes

Use aria- attributes to improve accessibility and make elements easier to find in tests.

Prefer screen.getByRole or screen.getByText to find elements like a user would.

Run tests often to catch problems early and keep your app working well.

Summary

React Testing Library helps test React components by simulating user actions.

Use render, screen, and fireEvent to write simple, clear tests.

Focus tests on what users see and do, not on internal details.