Testing React Components with Vitest

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Setup

Ut enim ad minim veniam, quis nostrud exercitation.

npm install -D vitest @testing-library/react jsdom

Configuration

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
  },
});

Writing Tests

Duis aute irure dolor in reprehenderit.

Basic Test

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

test('renders button text', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

Testing Events

Excepteur sint occaecat cupidatat non proident.

import { fireEvent } from '@testing-library/react';

test('calls onClick when clicked', () => {
  const handleClick = vi.fn();
  render(<Button onClick={handleClick}>Click</Button>);

  fireEvent.click(screen.getByText('Click'));
  expect(handleClick).toHaveBeenCalled();
});

Async Testing

Lorem ipsum dolor sit amet.

Waiting for Elements

await screen.findByText('Loaded');

Mocking

Sed do eiusmod tempor incididunt.

Conclusion

Testing builds confidence in your code.