Vitest Testing Framework - jonasyr/gitray GitHub Wiki

   ██████╗ ██╗████████╗██████╗  █████╗ ██╗   ██╗
  ██╔════╝ ██║╚══██╔══╝██╔══██╗██╔══██╗╚██╗ ██╔╝
  ██║  ███╗██║   ██║   ██████╔╝███████║ ╚████╔╝ 
  ██║   ██║██║   ██║   ██╔══██╗██╔══██║  ╚██╔╝  
  ╚██████╔╝██║   ██║   ██║  ██║██║  ██║   ██║   
   ╚═════╝ ╚═╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   
    Official Wiki of the GitRay Repository!

---

Table of Contents

• Description
• Implementation
• Structure
  • Project path and file name
  • Related files
  • Technology
• UML-Diagrams
  • Package diagram
  • Activity diagram
  • Object diagram
  • Class diagram

Description

Overview of the Vitest Testing Framework:

• Modern testing framework built on top of Vite for fast unit and integration testing.
• Provides Jest-compatible API with better performance and ES modules support.
• Configured for both frontend and backend testing in the monorepo using project-based configuration.
• Includes comprehensive test coverage reporting with v8 provider and coverage merging across projects.
• Supports TypeScript out of the box with proper type checking and path aliases.
• Features UI mode for interactive test running and debugging.

Test Commands:

# Run all tests
pnpm test

# Run frontend tests only
pnpm test:frontend

# Run backend tests only
pnpm test:backend

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage
pnpm test:coverage

# Run tests with UI
pnpm test:ui

Implementation

What does this feature exactly do:

• Vitest serves as the primary testing framework for the entire GitRay project.
• It runs unit tests, integration tests, and generates coverage reports for both frontend and backend applications.
• Uses a multi-project setup with separate configurations for frontend (React/JSDOM) and backend (Node.js) environments.
• Provides coverage merging capabilities to generate unified coverage reports across the monorepo.

What is the trigger of this feature:

• Triggered via pnpm scripts with granular control:
  • test - Run all tests across projects
  • test:frontend / test:backend - Run tests for specific projects
  • test:watch - Watch mode for development
  • test:ui - Interactive UI mode
  • test:coverage - Full coverage workflow with merging and reporting
• Can be executed manually through command line.
• Integrated into CI/CD pipelines for automated testing.
• Watch mode triggers on file changes during development.

What happens with the GUI:

• Terminal-based interface showing test results, pass/fail status, and coverage metrics.
• Interactive UI mode available via @vitest/ui for visual test management and debugging.
• In watch mode, provides interactive interface for filtering and re-running tests.
• Integrates with VS Code testing extensions for in-editor test running.

What happens in the background/Backend:

• Compiles TypeScript files on-the-fly using Vite's transformer with path alias resolution.
• Executes test suites in parallel for better performance across multiple projects.
• Collects code coverage data using v8 provider with comprehensive exclusion patterns.
• Manages separate test environments (Node.js for backend, JSDOM for frontend).
• Handles mocking and stubbing of dependencies including DOM APIs.
• Merges coverage reports from multiple projects using nyc for unified reporting.

Structure

Project path and file name

Vitest Testing Framework:

• File name: vitest.config.ts
• Project path: gitray/vitest.config.ts
  • Root workspace configuration managing multi-project setup
• Project path: gitray/apps/backend/vitest.config.ts
  • Backend-specific configuration with Node.js environment
• Project path: gitray/apps/frontend/vitest.config.ts
  • Frontend-specific configuration with JSDOM environment and React support

Related files

1. File name and project path: gitray/tsconfig.json - Root TypeScript configuration
2. File name and project path: gitray/package.json - Root package with test scripts and dependencies
3. File name and project path: gitray/apps/frontend/src/test-setup.ts - Frontend test setup with DOM mocking
4. File name and project path: gitray/apps/backend/__tests__/**/*.test.ts - Backend test files
5. File name and project path: gitray/apps/frontend/__tests__/**/*.test.tsx - Frontend test files with React components
6. File name and project path: gitray/apps/backend/package.json - Backend-specific dependencies
7. File name and project path: gitray/apps/frontend/package.json - Frontend-specific dependencies
8. File name and project path: gitray/packages/shared-types/src/index.ts - Shared types package with alias resolution

Technology

List of Technologies:

• Vitest ^3.2.3 - Testing framework with multi-project support
• @vitest/ui ^3.2.3 - Interactive UI for test management
• @vitest/coverage-v8 ^3.2.3 - Code coverage provider
• TypeScript ~5.7.3 - Type-safe testing with full ES modules support
• Vite - Build tool and dev server with fast HMR
• Node.js - Runtime environment for backend tests
• JSDOM - DOM environment simulation for frontend tests
• @testing-library/react - React component testing utilities
• @testing-library/jest-dom - Additional DOM matchers
• @vitejs/plugin-react - React support in Vite
• nyc ^17.1.0 - Coverage report merging and formatting
• ESM - ES Modules support throughout the project
• Path aliases - @gitray/shared-types for cross-package imports

UML-Diagrams

Package diagram

Activity diagram

Object diagram

Class diagram