feat: #287 - Fix App.test.tsx environment variable loading

[Able-faz-system]

Fix App.test.tsx Crashing on Missing Environment Variables

Overview

This PR resolves the issue where App.test.tsx crashes due to missing environment variables (CONTRACT_ID, RPC_URL, NETWORK_PASSPHRASE) that are
validated at the module level in config.ts. The solution ensures tests run consistently across all environments, including CI/CD pipelines, without
relying on developer-specific .env files.

Problem Statement

• The config.ts module validates critical Stellar/Soroban configuration at the module level
• When these environment variables were absent during test execution, tests would fail with uninformative error messages
• This made the test suite non-deterministic and dependent on local development setup
• Tests could not run reliably in CI environments without pre-configured environment variables

Solution Implemented

1. Vitest Configuration Enhancement (frontend/vite.config.ts)

 - Imported `loadEnv` from Vite to programmatically load environment variables based on the execution mode
 - Refactored the config export to be a function that receives the `mode` parameter
 - Added explicit `test.env` configuration in vitest options to inject test-specific environment variables
 - Configured fallback values that match the `.env.test` file for the three critical variables:
   - `VITE_CONTRACT_ID`: Stellar test contract ID
   - `VITE_RPC_URL`: Stellar testnet RPC endpoint
   - `VITE_NETWORK_PASSPHRASE`: Stellar test network identifier
 - These fallbacks ensure tests run even if `.env.test` is not present

2. Test Setup Improvements (frontend/src/test/setup.ts)

 - Added mock for `window.matchMedia` API which is not implemented in jsdom
 - This is a common issue when running React component tests in jsdom environment
 - The mock provides a complete implementation of the MediaQueryList interface
 - Fixes test failures in components that use media queries (e.g., ThemeContext)

3. Dependency Addition (frontend/package.json)

 - Added `msw` (Mock Service Worker) as a dev dependency
 - Required for the test setup infrastructure to function properly
 - Enables reliable API mocking in test suites

Key Benefits

✅ Deterministic Tests: Tests now run consistently regardless of local environment configuration
✅ CI/CD Ready: No additional setup required for continuous integration pipelines
✅ Developer Friendly: Developers don't need to maintain .env files specifically for tests
✅ Better Error Messages: Environment variables are properly configured before tests run
✅ Backward Compatible: Existing test setup and configuration patterns remain unchanged
✅ Reduces Maintenance: Single source of truth for test environment variables

Files Changed

• frontend/vite.config.ts - Enhanced Vite configuration with environment variable loading and vitest setup
• frontend/src/test/setup.ts - Added window.matchMedia mock for jsdom compatibility
• frontend/package.json - Added msw dev dependency
• frontend/package-lock.json - Updated lock file with new dependency

Testing

• ✅ Verified that environment variables are correctly loaded in test mode
• ✅ Tests no longer crash due to missing environment variables
• ✅ All test-related imports work correctly with lazy-loaded configuration
• ✅ jsdom compatibility issues with window.matchMedia are resolved

Migration Notes

• No action required from developers - this is a transparent improvement
• Existing .env.test file is respected by the new configuration
• Local .env overrides still work as expected during development
• Tests in CI will automatically use the configured fallback values

Technical Details

• The loadEnv() function from Vite automatically loads .env, .env.local, and .env.{mode} files
• The VITE_ prefix in loadEnv() ensures only environment variables intended for the browser are loaded
• Vitest's test.env option injects these variables into the test environment
• The vi.fn() implementation for window.matchMedia provides all necessary MediaQueryList methods

Related Issues

Closes #287

[drips-wave]

@Able-faz-system Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits