Testing a React Application with Vitest and React Testing Library

1. vite-react-ts-vitest-template

   1 1 0 2.9 TypeScript

   Template for Vite+React+Vitest+pnpm

   

   You can access full project here:

2. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

   

3. vite

   2 906 72,711 9.9 TypeScript

   Next generation frontend tooling. It's fast!

   

   import { describe, it, expect } from 'vitest' import { render, screen, fireEvent } from '@testing-library/react' import App from '../App' describe('App component', () => { it('renders Vite and React logos with correct links', () => { render() const viteLogo = screen.getByRole('img', { name: /Vite logo/i }); const reactLogo = screen.getByAltText('React logo') expect(viteLogo).toBeInTheDocument() expect(reactLogo).toBeInTheDocument() expect(viteLogo.closest('a')).toHaveAttribute('href', 'https://vitejs.dev') expect(reactLogo.closest('a')).toHaveAttribute('href', 'https://react.dev') }) it('renders the initial count correctly', () => { render() const button = screen.getByRole('button', { name: /count is 0/i }) expect(button).toBeInTheDocument() }) it('increments count when button is clicked', () => { render() const button = screen.getByRole('button', { name: /count is 0/i }) fireEvent.click(button) expect(button).toHaveTextContent('count is 1') }) it('renders text content correctly', () => { render() const title = screen.getByText('Vite \+ React') const editText = screen.getByText((content, _) => content.includes('Edit') && content.includes('save to test HMR')) const docsText = screen.getByText('Click on the Vite and React logos to learn more') expect(title).toBeInTheDocument() expect(editText).toBeInTheDocument() expect(docsText).toBeInTheDocument() }) })

4. React

   3 1,935 235,634 9.9 JavaScript

   The library for web and native user interfaces.

   

   import { describe, it, expect } from 'vitest' import { render, screen, fireEvent } from '@testing-library/react' import App from '../App' describe('App component', () => { it('renders Vite and React logos with correct links', () => { render() const viteLogo = screen.getByRole('img', { name: /Vite logo/i }); const reactLogo = screen.getByAltText('React logo') expect(viteLogo).toBeInTheDocument() expect(reactLogo).toBeInTheDocument() expect(viteLogo.closest('a')).toHaveAttribute('href', 'https://vitejs.dev') expect(reactLogo.closest('a')).toHaveAttribute('href', 'https://react.dev') }) it('renders the initial count correctly', () => { render() const button = screen.getByRole('button', { name: /count is 0/i }) expect(button).toBeInTheDocument() }) it('increments count when button is clicked', () => { render() const button = screen.getByRole('button', { name: /count is 0/i }) fireEvent.click(button) expect(button).toHaveTextContent('count is 1') }) it('renders text content correctly', () => { render() const title = screen.getByText('Vite \+ React') const editText = screen.getByText((content, _) => content.includes('Edit') && content.includes('save to test HMR')) const docsText = screen.getByText('Click on the Vite and React logos to learn more') expect(title).toBeInTheDocument() expect(editText).toBeInTheDocument() expect(docsText).toBeInTheDocument() }) })

Suggest a related project