Testing - Jest & React Testing Library

Writing tests for React components.

Setup 🧪

1npm install --save-dev @testing-library/react @testing-library/jest-dom jest

Component Tests

1// Button.tsx
2export function Button({ onClick, children }: {
3  onClick: () => void;
4  children: React.ReactNode
5}) {
6  return (
7    <button onClick={onClick} className="btn">
8      {children}
9    </button>
10  );
11}
12
13// Button.test.tsx
14import { render, screen, fireEvent } from '@testing-library/react';
15import { Button } from './Button';
16
17describe('Button', () => {
18  it('renders children', () => {
19    render(<Button onClick={() => {}}>Click me</Button>);
20    expect(screen.getByText('Click me')).toBeInTheDocument();
21  });
22
23  it('calls onClick when clicked', () => {
24    const handleClick = jest.fn();
25    render(<Button onClick={handleClick}>Click</Button>);
26
27    fireEvent.click(screen.getByText('Click'));
28    expect(handleClick).toHaveBeenCalledTimes(1);
29  });
30});

See you soon! 🚀