Testing client components in NextJS

Introduction

Testing client components helps make sure your parts of the app work right before users see them. It catches mistakes early so your app stays reliable and smooth.

When you want to check if a button click updates the screen correctly.

When you need to verify that user input is handled properly in a form.

When you want to confirm that a component shows the right text based on props.

When you want to prevent bugs before releasing your app to users.

When you want to make sure your UI works well after changes.

Syntax

NextJS

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

test('description of what is tested', () => {
  render(<MyComponent />);
  const element = screen.getByText('some text');
  fireEvent.click(element);
  expect(screen.getByText('new text')).toBeInTheDocument();
});

Use render to show the component in a test environment.

screen helps find elements like buttons or text.

Examples

This test checks if the Greeting component shows the right message with the given name.

NextJS

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

test('shows greeting message', () => {
  render(<Greeting name="Anna" />);
  expect(screen.getByText('Hello, Anna!')).toBeInTheDocument();
});

This test makes sure clicking the increment button updates the count shown.

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 counter component and a test that checks if clicking the button increases the count shown on screen.

NextJS

'use client';
import React, { useState } from 'react';

// Simple Counter component
export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)} aria-label="Increment">Increment</button>
    </div>
  );
}

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

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

Important Notes

Use aria-label or roles to make elements easy to find in tests and improve accessibility.

Run tests often to catch bugs early.

Keep tests small and focused on one thing at a time.

Summary

Testing client components helps catch UI bugs early.

Use React Testing Library to render components and simulate user actions.

Write simple tests that check what users see and do.