Migrate Jest to Vitest

As a Developer, I want to migrate the test framework from Jest to Vitest, so that I can benefit from faster test execution, better ESM support, and improved developer experience.

Acceptance Criteria

• All existing Jest tests must be migrated to Vitest without changing test logic or assertions
• Test coverage thresholds must be maintained at current levels
• All test scripts in package.json must be updated to use Vitest
• Test execution must be faster than Jest (target: 30-50% improvement)
• CI/CD pipeline must continue to work with Vitest
• All 317 existing tests must pass with Vitest
• Coverage reporting must work correctly with Vitest
• React Native testing library integration must work with Vitest
• Expo-specific test utilities must continue to function
• Path aliases (@/) must work correctly in tests
• TypeScript configuration must be compatible with Vitest

Migration Steps

1. Install Vitest and Dependencies

• Install vitest as a dev dependency
• Install @vitest/ui for test UI (optional)
• Install @vitest/coverage-v8 for coverage reporting
• Install jsdom or happy-dom for DOM environment (if needed)
• Install @testing-library/jest-dom compatible matchers for Vitest

2. Create Vitest Configuration

• Create vitest.config.ts file
• Configure test environment (React Native/Expo compatible)
• Set up path aliases (@/ → <rootDir>/)
• Configure coverage settings matching current Jest thresholds
• Set up transform patterns for TypeScript and JSX
• Configure test file patterns matching current Jest patterns
• Set up module name mapping for React Native dependencies

3. Update Test Setup Files

• Migrate jest.setup.js to vitest.setup.ts or similar
• Ensure all global test utilities are available
• Configure React Native testing library for Vitest
• Set up any Expo-specific mocks or utilities

4. Update Package.json Scripts

• Replace jest commands with vitest equivalents:
  • test → vitest run
  • test:watch → vitest watch
  • test:coverage → vitest run --coverage
  • test:ci → vitest run --coverage --reporter=verbose
  • Update all test path pattern commands to use Vitest syntax

5. Update Test Files

• Replace Jest imports with Vitest imports:
  • import { describe, it, expect, beforeEach, afterEach } from 'vitest'
  • Replace jest.fn() with vi.fn()
  • Replace jest.mock() with vi.mock()
  • Replace jest.spyOn() with vi.spyOn()
• Update any Jest-specific APIs to Vitest equivalents
• Ensure React Native testing library matchers work with Vitest

6. Update Transform and Module Resolution

• Configure Vitest to handle React Native and Expo dependencies
• Set up proper transform ignore patterns
• Ensure native modules are properly mocked or handled

7. Update CI/CD Configuration

• Update GitHub Actions workflow to use Vitest
• Ensure coverage reporting works in CI
• Update any test result reporting if needed

8. Remove Jest Dependencies

• Remove jest from devDependencies
• Remove jest-expo from devDependencies
• Remove @testing-library/jest-native if no longer needed
• Remove jest.config.js file
• Clean up any Jest-specific configuration

9. Verify Test Execution

• Run all test suites and verify they pass
• Verify coverage reports match expected thresholds
• Test watch mode functionality
• Test CI mode functionality
• Verify test performance improvements

Technical Considerations

React Native Compatibility

• Vitest may require special configuration for React Native
• Expo-specific utilities may need custom setup
• Native module mocking may need adjustment

Coverage Thresholds

Current coverage thresholds that must be maintained:

• ./utils/recipeFlavorCalculation.ts: 90% statements, 65% branches, 100% functions, 90% lines
• ./data/ingredients/index.ts: 95% statements, 95% branches, 100% functions, 95% lines
• ./data/recipes/index.ts: 90% statements, 45% branches, 100% functions, 87% lines

Test Environment

• Current Jest config uses testEnvironment: 'node'
• May need to configure Vitest environment for React Native/Expo
• Consider using @vitest/environment-node or custom environment

Module Resolution

• Current Jest config has complex transformIgnorePatterns for React Native
• Vitest uses Vite’s module resolution which may handle this differently
• Path aliases (@/) must continue to work

Performance Targets

• Current test suite: 317 tests across 18 test suites
• Target: 30-50% faster execution time
• Watch mode should be responsive and fast

Related Files

• shaker/jest.config.js - Current Jest configuration
• shaker/jest.setup.js - Current Jest setup file
• shaker/package.json - Package scripts and dependencies
• shaker/__tests__/ - All test files (317 tests)
• .github/workflows/ - CI/CD configuration

Risks and Mitigation

Risk: React Native Compatibility Issues

• Mitigation: Test thoroughly with React Native testing library, may need custom Vitest environment

Risk: Expo-Specific Utilities Breaking

• Mitigation: Verify all Expo test utilities work, may need to maintain some Jest compatibility layer

Risk: Coverage Reporting Differences

• Mitigation: Compare coverage reports between Jest and Vitest, adjust thresholds if needed

Risk: CI/CD Pipeline Breaking

• Mitigation: Test CI configuration thoroughly before merging, have rollback plan

Success Criteria

• ✅ All 317 tests pass with Vitest
• ✅ Test execution is 30-50% faster
• ✅ Coverage thresholds are maintained
• ✅ All test scripts work correctly
• ✅ CI/CD pipeline passes
• ✅ Watch mode works smoothly
• ✅ No regressions in test functionality

Priority

Medium - Performance and developer experience improvement, but not blocking core functionality

Estimated Effort

High - Comprehensive migration affecting all test files and configuration

Dependencies

• None - Can be done independently of other features