React Guru – Testing Guide

Unit Testing

Integration Testing

End‑to‑End Testing

Unit Testing React Components

Unit tests focus on a single component in isolation. The most popular toolchain is Jest + @testing-library/react.

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

test('increments counter on click', async () => {
  render();
  const button = screen.getByRole('button', {name:/increment/i});
  await userEvent.click(button);
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

Read Docs

Integration Testing

Integration tests verify that multiple components interact correctly. With React Testing Library you can render a small tree.

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

test('adds item to list', async () => {
  render();
  const input = screen.getByPlaceholderText(/new item/i);
  const addBtn = screen.getByRole('button', {name:/add/i});
  await userEvent.type(input, 'Learn testing');
  await userEvent.click(addBtn);
  expect(screen.getByText('Learn testing')).toBeInTheDocument();
});

Jest React Tutorial

End‑to‑End (E2E) Testing

E2E tests simulate real user flows in a browser. Playwright and Cypress are top choices.

// example with Cypress
describe('Todo flow', () => {
  it('creates a new todo', () => {
    cy.visit('/');
    cy.get('[data-cy=new-todo]').type('Write tests{enter}');
    cy.contains('Write tests').should('exist');
  });
});

Cypress Docs