Skip to content

test: stabilize JoinVolunteerPage localStorage setup in coverage runs

Kushal Lagichetty requested to merge fix/failed-tests into develop

Overview

This MR fixes the JoinVolunteerPage test failures that occurred during npm run test:coverage.

What does this MR do and why?

fix: stabilize JoinVolunteerPage coverage tests

JoinVolunteerPage.test.tsx was failing in full coverage runs because it assumed localStorage.clear() was always available. In practice, the suite could leave localStorage in a partially mocked state, which caused the file to fail before its assertions ran.

This change keeps the fix scoped to the failing test file by stubbing a complete localStorage implementation in that spec and restoring globals after each test.

Changes Made

  • Updated tests/pages/JoinVolunteerPage.test.tsx
  • Added a local localStorage stub in beforeEach
  • Added cleanup with vi.unstubAllGlobals() in afterEach

Technical Details

Root cause:

  • The test file called localStorage.clear() directly.
  • During full coverage runs, leaked global test state meant localStorage.clear was not always defined.

Fix:

  • Provide a complete mocked localStorage inside JoinVolunteerPage.test.tsx
  • Reset the mocked store before each test
  • Restore globals after each test to avoid cross-test contamination

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

N/A

Screenshots or Screen Recordings

Not applicable. No UI changes.

How to Set Up and Validate Locally

  1. Checkout this branch.

  2. Run the affected test file:

    npx vitest run tests/pages/JoinVolunteerPage.test.tsx

  3. Run the full coverage suite:

    npm run test:coverage

  4. Confirm that JoinVolunteerPage tests pass and the full suite completes successfully.

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Run JoinVolunteerPage spec directly All JoinVolunteerPage tests pass ✅
Run full coverage suite No failure from localStorage.clear is not a function ✅
Use test-local storage mock Test file remains isolated from leaked global state ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)

  • No console.log() or debugger statements left in code

  • No unused imports, variables, or functions

  • No duplicate code and use of existing components for reusability

  • i18n check passed with no hardcoded strings in codebase for i18n support

  • TypeScript types are properly defined (no any unless justified)

  • ESLint and Prettier checks pass

    bun run lint

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Responsive design considered (mobile-first if applicable)
  • Accessibility attributes included (aria-*, role, etc.)
  • Icons from lucide-react used consistently

API & Data Fetching

  • TanStack Query used for server state (if applicable)
  • Loading and error states handled
  • API types defined in src/types/api.ts
  • Axios interceptors handle auth tokens correctly
  • Use of Zod for data validations

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)
  • CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

  • This change fixes the failing spec locally, but it does not identify which other test is leaking or partially replacing localStorage.
  • The suite still has unrelated non-blocking warnings (act(...), Radix dialog accessibility warnings, asChild warnings).

Additional Notes

  • The fix was intentionally kept local to JoinVolunteerPage.test.tsx instead of changing shared test setup.

  • Validation completed with:

    npx vitest run tests/pages/JoinVolunteerPage.test.tsx npm run test:coverage

Merge request reports