Skip to content

[FEAT] Set up Vitest and React Testing Library for frontend unit tests #612

Description

@rishab11250

Is your feature request related to a problem? Please describe.

The frontend has zero unit test infrastructure. There are no tests for
Zustand stores (auth-store, chat-store), no component tests (MessageBubble,
SourceCard, DocumentSidebar), and no API client tests. The only tests are
Playwright E2E tests that mock all API routes and cover only the happy path.
This makes refactoring risky — there's no safety net for regressions.

Describe the solution you'd like

  1. Install and configure Vitest + React Testing Library + jsdom:
    npm install -D vitest @testing-library/react @testing-library/jest-dom
    @testing-library/user-event jsdom
    Create vitest.config.ts
    Add test scripts to package.json
    Add test setup file with @testing-library/jest-dom matchers

  2. Create test setup file (frontend/src/test/setup.ts):

    • Configure vitest to use jsdom environment
    • Set up global matchers from @testing-library/jest-dom
    • Mock next/navigation, zustand, and window.fetch as needed
  3. Write a sample test for MessageBubble component:

    • Renders user message correctly
    • Renders assistant message with markdown
    • Copy button functionality
    • Share button functionality
  4. Update CI to run frontend unit tests:

    • Add "npm test" to frontend-check job in .github/workflows/ci.yml

Describe alternatives you've considered

  • Jest: more established but slower and requires more configuration
  • Playwright component testing: heavier, better for visual tests but
    overkill for state/logic tests
  • Keeping no tests: continued risk of regressions during refactoring

Additional Context

  • package.json doesn't currently have vitest or any test runner listed
    in devDependencies
  • The frontend E2E tests in e2e/ already demonstrate that Playwright is
    installed — we're adding a complementary layer, not replacing it
  • A vitest.config.ts file already exists at frontend/vitest.config.ts
  • Recommended coverage threshold start: 60% for stores, 40% for components

GSSoC '26

  • Yes, I am participating in GirlScript Summer of Code and would like to build this.

Metadata

Metadata

Labels

enhancementNew feature or improvementgssocGirlScript Summer of Code 2026 issue/PR

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions