🔧 Setup Frontend Testing Infrastructure (Vitest + React Testing Library)

[Yasaswini-ch]

Description

Currently, the client-side application lacks a testing framework. As the codebase grows, manual testing becomes inefficient and prone to regressions. Establishing a solid testing foundation is critical for ensuring reliability, especially for health-related features.

Proposed Solution

Set up a modern testing environment using Vitest (chosen for its speed and native Vite compatibility) and React Testing Library (for testing components in a way that resembles user behavior).

Key Tasks

• Install dependencies: vitest, jsdom, @testing-library/react, @testing-library/jest-dom.
• Configure vitest.config.js (or update existing vite.config.js with test config).
• Add a sample test for a simple component (e.g., Loader or Button) to verify the setup.
• Update package.json with scripts: "test": "vitest" and "test:ui": "vitest --ui".
• Document how to run tests in CONTRIBUTING.md.

Benefits

• Reliability: Catches bugs early in the development cycle.
• Confidence: Allows for safer refactoring and feature additions.
• Quality: Encourages better code structure and component isolation.

Tech Stack

• Vitest
• React Testing Library
• JSDOM
  I would like to work on this issue under SWOC26

[tirth-patel06]

@Yasaswini-ch
Thank you for your suggestion, but we are currently not planning to add React Testing.