React

React components testen - Basics met testing-library

Test wat users zien, niet implementatie details.

Home/Categorieën/React/React components testen - Basics met testing-library

Testing filosofie

Test behavior, niet implementation Render component Query for elements Simulate user interaction Assert expected result

Tools

React Testing Library - render, screen, fireEvent Jest - test runner, assertions Test user flows, not technical details

Code Voorbeelden

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

test('Button click handler fires', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  
  const button = screen.getByRole('button', { name: /click me/i });
  fireEvent.click(button);
  
  expect(handleClick).toHaveBeenCalledTimes(1);
});

// Test form
test('Form submission works', () => {
  render(<LoginForm />);
  
  fireEvent.change(screen.getByPlaceholderText(/email/i), {
    target: { value: 'test@example.com' }
  });
  fireEvent.click(screen.getByRole('button', { name: /submit/i }));
  
  expect(screen.getByText(/success/i)).toBeInTheDocument();
});

Relevante trefwoorden

testingjesttesting-library
← Terug naar ReactAlle categorieën →