Testing React Components with Vitest & RTL

User-Centric Component Testing

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Counter } from './Counter';

describe('Counter Component', () => {
    it('increments count when button is clicked', () => {
        render(<Counter />);
        const button = screen.getByRole('button', { name: /\+/i });
        expect(screen.getByText('0')).toBeInTheDocument();

        fireEvent.click(button);
        expect(screen.getByText('1')).toBeInTheDocument();
    });
});