ReactTestingReactTypeScript
Testing React Components with Vitest and React Testing Library
Write meaningful tests for your React components using modern testing tools and best practices.
Mar 31, 202611 min read8,900 views1680 words
Setting Up Vitest
TS
| 1 | import { describe, it, expect } from 'vitest'; |
| 2 | import { render, screen, userEvent } from '@testing-library/react'; |
| 3 | import { Counter } from './Counter'; |
| 4 | |
| 5 | describe('Counter', () => { |
| 6 | it('increments count on click', async () => { |
| 7 | render(<Counter />); |
| 8 | const button = screen.getByRole('button', { name: /increment/i }); |
| 9 | await userEvent.click(button); |
| 10 | expect(screen.getByText('1')).toBeInTheDocument(); |
| 11 | }); |
| 12 | }); |