Test Setup with Vitest and React Testing Library in Vite + React + TypeScript

Test Setup

Note: This document explains how to configure Vitest (https://vitest.dev/) and React Testing Library (https://testing-library.com/docs/react-testing-library/intro) in a Vite (https://vitejs.dev/) project with TypeScript. Based on official documentation.

1. Installing Dependencies

Run the following command to install the required dependencies:

pnpm install -D vitest jsdom @testing-library/react @testing-library/user-event @testing-library/jest-dom

Vitest: A fast Vite-native test runner. More details in the Vitest Guide.
jsdom: JavaScript implementation of DOM and HTML standards for testing.
React Testing Library: Utility for testing React components. See the React Testing Library Introduction.
User Event: Simulates user interactions. Documentation at User Event.
Jest DOM: Custom jest matchers for asserting on DOM nodes in Vitest. Repository: jest-dom.

2. Vitest Configuration

Create a file named src/vitest.setup.ts with:

// src/vitest.setup.ts
import "@testing-library/jest-dom/vitest";

Configure Vitest in vite.config.ts:

// vite.config.ts
/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./src/vitest.setup.ts"],
    css: true,
    testTimeout: 5000,
    reporters: ["verbose"],
  },
  // ...other Vite configurations
});

For more details on testing configuration in Vite, check the Test Configuration section in Vite docs.

3. React Testing Library Integration

React Testing Library allows you to test React components by focusing on user behavior. Example test:

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import MyComponent from './MyComponent'

test('displays correct text on click', async () => {
  render(<MyComponent />)
  const button = screen.getByRole('button', { name: /click me/i })
  await userEvent.click(button)
  expect(screen.getByText(/clicked!/i)).toBeInTheDocument()
})

Learn more in the React Testing Library Guide.

4. TypeScript Types

Add Vitest types in tsconfig.app.json:

// tsconfig.app.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src", "src/vitest.setup.ts"]
}

This ensures TypeScript recognizes Vitest global APIs.

5. Test Scripts

Include the following scripts in your package.json to simplify test execution:

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:watch": "vitest --watch",
    "test:ui": "vitest --ui"
  }
}

test: Runs all tests once.
test:watch: Watches files and re-runs tests on changes.
test:ui: Opens Vitest’s interactive UI to debug tests.

Conclusion

With this setup, your Vite + React + TypeScript project is ready to run unit and integration tests using Vitest and React Testing Library. Always refer to the Vitest Documentation and the React Testing Library Docs for advanced configuration and best practices.