[Foundation] Set up comprehensive testing infrastructure

[coderabbitai]

Overview

Implement complete testing infrastructure for ThumbCode 0.1 → 1.0.

Current State

• Zero test files exist
• Jest and Testing Library dependencies installed but unused
• No test coverage reporting
• No test documentation

Requirements

• Configure Jest for React Native + Expo
• Set up Testing Library utilities
• Create test utilities and mocks
• Add test coverage reporting (>80% target)
• Write tests for existing 5 UI components
• Document testing patterns and conventions
• Add pre-commit hooks for test execution

Success Criteria

• All existing components have >90% test coverage
• Test suite runs in <10 seconds
• Clear documentation for writing tests

Priority: CRITICAL

Estimated Effort: 2-3 days

Labels: foundation, testing, priority:critical

Backlink: Related to PR #2

[jbdevprimary]

@coderabbitai @jules is reporting the following in https://jules.google.com/session/1906573889307548674

I've been working to resolve the test environment issues, but I'm still encountering a persistent Babel configuration problem. The latest error, Caching has already been configured with .never or .forever(), points to a conflict in how the Babel cache is being managed, and my previous attempts to fix it—including creating separate configurations, updating dependencies, and making the configuration environment-aware—have not been successful.

I've exhausted my current troubleshooting strategies. Could you please provide some guidance on how to resolve this caching issue? I'm open to new approaches or any insights you might have.

Do you or @claude have ANY ideas on an implementation plan we can make here that will research solutions for this blocker

[coderabbitai]

🧩 Analysis chain

@jbdevprimary, I'll help you investigate this Babel caching issue. Let me start by examining your current Babel configuration and test setup to understand the problem better.

---

🏁 Script executed:

#!/bin/bash

# Find all Babel configuration files
echo "=== Babel Configuration Files ==="
fd -t f -e js -e json -e cjs -e mjs 'babel\.config|\.babelrc' --exec echo "Found: {}"
fd -t f -e js -e json -e cjs -e mjs 'babel\.config|\.babelrc' --exec cat {}

echo -e "\n=== Package.json (Babel-related) ==="
if [ -f package.json ]; then
  cat package.json | jq '{
    name: .name,
    babel: .babel,
    jest: .jest,
    scripts: .scripts,
    dependencies: (.dependencies // {} | with_entries(select(.key | contains("babel")))),
    devDependencies: (.devDependencies // {} | with_entries(select(.key | contains("babel"))))
  }'
fi

echo -e "\n=== Jest Configuration Files ==="
fd -t f -e js -e json -e cjs -e mjs -e ts 'jest\.config' --exec echo "Found: {}"
fd -t f -e js -e json -e cjs -e mjs -e ts 'jest\.config' --exec cat {}

echo -e "\n=== Test Setup Files ==="
fd -t f 'setupTests|test.*setup|setup.*test' --exec echo "Found: {}"
fd -t f 'setupTests|test.*setup|setup.*test' --exec cat {}

echo -e "\n=== Search for cache.never() or cache.forever() usage ==="
rg -n "cache\.(never|forever)" -A 2 -B 2

Length of output: 2334

---

🏁 Script executed:

#!/bin/bash

# Check if jest.setup.js exists and its contents
echo "=== Jest Setup File ==="
if [ -f jest.setup.js ]; then
  echo "Found: jest.setup.js"
  cat jest.setup.js
else
  echo "jest.setup.js not found"
fi

# Check for any metro configuration (React Native bundler)
echo -e "\n=== Metro Configuration ==="
fd -t f 'metro\.config' --exec echo "Found: {}"
fd -t f 'metro\.config' --exec cat {}

# Look for any test files that might be importing or configuring Babel
echo -e "\n=== Test Files Structure ==="
fd -t f -e test.ts -e test.tsx -e test.js -e test.jsx -e spec.ts -e spec.tsx -e spec.js -e spec.jsx | head -20

# Check for node_modules/jest-expo to understand the preset
echo -e "\n=== Package Versions ==="
if [ -f package.json ]; then
  cat package.json | jq '{
    jest_related: ((.dependencies // {}) + (.devDependencies // {}) | with_entries(select(.key | contains("jest") or contains("test")))),
    expo_related: ((.dependencies // {}) + (.devDependencies // {}) | with_entries(select(.key | contains("expo"))))
  }'
fi

# Check for any environment variable configurations
echo -e "\n=== Environment Files ==="
fd -t f -e env | head -10

# Look for TypeScript configuration
echo -e "\n=== TypeScript Config ==="
if [ -f tsconfig.json ]; then
  cat tsconfig.json
fi

Length of output: 2782

---

🌐 Web query:

Babel "Caching has already been configured with .never or .forever()" jest-expo

💡 Result:

Cause: Babel's api.cache was configured inconsistently (e.g. .never() or .forever()) and then another cache method was used later during the same evaluation — Babel throws "Caching has already been configured with .never or .forever()" when that happens. This often appears in Jest/jest-expo when Babel config is evaluated multiple times or when api.cache is used incorrectly (for example calling api.cache.* in multiple places or mixing api.env() and cache calls improperly). [1][2]

Fixes (pick the one that applies):

• Use a single babel config function and configure cache once. Example babel.config.js:
  module.exports = function (api) {
  api.cache.forever(); // or api.cache.never(), or api.cache(true)
  return { presets: ['babel-preset-expo'] };
  }
• Don’t call api.cache in both babel.config.js and other places (.babelrc, package.json). Keep cache config only in babel.config.js at project root.
• If you use api.env(), combine it inside the same exported function and only call api.cache once (don’t call api.cache after calling api.env() in an inconsistent way).
• If using older Babel/Jest versions, upgrade to a recent @babel/core / babel-jest compatible release, since caching behaviour changed across versions.

References:

• Babel caching implementation and the exact error source. [1]
• Issue / reproduction notes showing the error when api.cache and api.env are misused. [2]

If you want, paste your babel.config.js (and any .babelrc/package.json babel fields) and I’ll point to the exact line to change.

---

🌐 Web query:

jest-expo babel.config.js api.cache multiple configurations React Native

💡 Result:

Short answer: use Babel's config API to cache correctly and branch per caller (Metro vs Jest). For Expo/jest-expo you should detect the caller or env and set api.cache appropriately (don't blindly use forever if config must change for tests).

Why: api.cache(true) = permanent cache; api.cache.using(...) / api.cache.invalidate(...) lets Babel re-evaluate when a small, specific value changes; api.caller(...) lets you detect who is invoking Babel (Metro, Jest, etc.). [1][2][3][4]

Minimal example (babel.config.js):

module.exports = function (api) {
// cache based on caller (e.g. jest vs metro) and NODE_ENV
api.cache.using(() => {
// return small-range discriminators only
return {
isJest: !!process.env.JEST_WORKER_ID, // true/false
env: process.env.BABEL_ENV === 'test' ? 'test' : (process.env.NODE_ENV || 'development'),
};
});

const isJest = !!process.env.JEST_WORKER_ID || api.caller(c => c && c.name && c.name.includes('babel-jest'));
const isWeb = api.caller(c => c && c.platform === 'web');

return {
presets: ['babel-preset-expo'],
plugins: [
// example: only enable reanimated plugin for native builds
!isWeb && 'react-native-reanimated/plugin',
].filter(Boolean),
};
};

Notes/tips

• For jest-expo, Jest sets env vars (e.g. JEST_WORKER_ID) and Babel caller may indicate jest; use those to distinguish test runs. [1][2]
• Prefer api.cache.using(...) or api.cache.invalidate(...) with small-range values rather than api.cache(true) if your config must change between callers (tests vs bundler). [2]
• After changing babel.config.js, restart Metro/Jest and clear caches as needed (expo start --clear / jest --clearCache). [1][3]

Sources:

• Expo babel.config.js docs (default preset + restart/clear instructions). [1]
• Babel config API including api.cache, api.caller, api.env and recommended patterns. [2]
• Expo Metro notes about using api.caller for platform-specific config. [3]
• Explanation of api.cache(true) on StackOverflow. [4]

---

@jbdevprimary, I've identified the issue! The problem is in your babel.config.js file. The api.cache(true) creates a permanent cache, but when Jest runs, Babel tries to reconfigure caching for the test environment, causing the conflict.

Here's a comprehensive implementation plan to resolve this:

Implementation Plan: Fix Babel Caching Error

Root Cause

Your current babel.config.js uses api.cache(true) which sets a permanent cache. When Jest (test runner) and Metro (bundler) both evaluate the Babel config, they attempt to configure caching independently, causing the "Caching has already been configured" error.

Solution

Step 1: Update babel.config.js to use environment-aware caching

Replace your current babel.config.js with this updated version:

module.exports = function (api) {
  // Use api.cache.using() to cache based on environment
  // This allows different configurations for Jest vs Metro without conflicts
  api.cache.using(() => ({
    isJest: !!process.env.JEST_WORKER_ID,
    env: process.env.NODE_ENV || 'development',
  }));

  // Detect if running in Jest environment
  const isJest = !!process.env.JEST_WORKER_ID || 
                 api.caller(caller => caller && caller.name === 'babel-jest');

  // Detect web platform
  const isWeb = api.caller(caller => caller && caller.platform === 'web');

  return {
    presets: [
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }]
    ],
    plugins: [
      'nativewind/babel',
      // Only include reanimated plugin for non-web platforms
      // This can help avoid issues in certain test environments
      !isWeb && 'react-native-reanimated/plugin'
    ].filter(Boolean)
  };
};

Key changes:

• Replace api.cache(true) with api.cache.using() that returns environment discriminators
• Detect Jest environment using JEST_WORKER_ID environment variable
• Use api.caller() to detect the platform and caller
• Conditionally apply plugins based on the environment

Step 2: Clear all caches

Run these commands to ensure no stale cache interferes:

# Clear Jest cache
npx jest --clearCache

# Clear Expo/Metro cache
npx expo start --clear

# Optional: Clear node_modules cache (if issues persist)
rm -rf node_modules/.cache

Step 3: Test the fix

# Run tests to verify the fix
npm run test

# If successful, run in watch mode
npm run test:watch

Step 4: Alternative approach (if the above doesn't work)

If you still encounter issues, try this simpler approach using api.cache.never():

module.exports = function (api) {
  // Disable caching entirely - less performant but ensures no conflicts
  api.cache.never();
  
  return {
    presets: [
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }]
    ],
    plugins: [
      'nativewind/babel',
      'react-native-reanimated/plugin'
    ]
  };
};

This disables caching entirely, which is less performant but guarantees no caching conflicts.

Additional Debugging Steps

If the issue persists after trying both approaches:

1. Check for duplicate Babel configs: Ensure you don't have a .babelrc or babel field in package.json that might conflict
2. Verify dependencies: Make sure all Babel-related packages are compatible versions
3. Check for conflicting Metro config: The metro.config.js with nativewind might need alignment
4. Review jest-expo preset: The preset might have its own Babel configuration that conflicts

Would you like me to create an issue to track this fix, or would you prefer to implement this solution immediately? Let me know if you encounter any issues with these approaches, and I can dig deeper into alternative solutions!