← mobile

React Native App Testing Guide

Prerequisites

  1. Node.js installed (v18+)
  2. Expo CLI installed globally (optional, but helpful)
  3. iOS Simulator (Mac only) or Android Emulator OR Expo Go app on your phone
  4. Environment variables configured

Step 1: Environment Setup

Create .env file

Create apps/mobile/.env with your credentials:

cd apps/mobile
touch .env

Add these variables (get them from your Supabase dashboard and Railway backend):

EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
EXPO_PUBLIC_API_URL=https://your-backend.railway.app

Where to find these:

  • Supabase URL & Key: Supabase Dashboard → Settings → API
  • API URL: Your Railway backend URL (check Railway dashboard)

Install Dependencies

# From project root
npm install

# Build shared package
cd packages/shared
npm install
npm run build
cd ../..

# Install mobile dependencies
cd apps/mobile
npm install

Step 2: Start Development Server

From project root:

npm run dev:mobile

Option B: Direct Expo command

cd apps/mobile
npm start

This will:

  1. Start the Metro bundler
  2. Show a QR code in terminal
  3. Open Expo DevTools in browser

Step 3: Run on Device/Simulator

Option A: iOS Simulator (Mac only)

npm run dev:mobile:ios
# or
cd apps/mobile && npm run ios

Requirements:

  • Xcode installed
  • iOS Simulator available

Option B: Android Emulator

npm run dev:mobile:android
# or
cd apps/mobile && npm run android

Requirements:

  • Android Studio installed
  • Android emulator running

Option C: Physical Device (Easiest)

  1. Install Expo Go app on your phone:

  2. Scan the QR code shown in terminal/browser with:

    • iOS: Camera app (opens Expo Go automatically)
    • Android: Expo Go app (has built-in QR scanner)

Step 4: Testing Checklist

✅ Authentication Flow

  1. Sign Up

    • Open app → Should show Sign In screen
    • Tap "Don't have an account? Sign Up"
    • Enter email and password
    • Tap "Sign Up"
    • Should show success message
    • Check email for verification (if email confirmation enabled)

  2. Sign In

    • Enter email and password
    • Tap "Sign In"
    • Should navigate to Dashboard
    • Should see "Journal" header and "+ New" button

  3. Session Persistence

    • Close app completely
    • Reopen app
    • Should automatically sign in (no login screen)

  4. Sign Out

    • Go to Settings tab
    • Tap "Sign Out"
    • Should return to Sign In screen

✅ Dashboard & Entries

  1. View Entries

    • Dashboard should load existing entries
    • Each entry shows:
      • Relative date (e.g., "2 hours ago")
      • Moon phase icon
      • Title (if present)
      • Content preview
      • Tags (if present)
      • Notebook color (if assigned)

  2. Infinite Scroll

    • Scroll to bottom of entries list
    • Should automatically load more entries
    • Loading indicator appears at bottom

  3. Pull to Refresh

    • Pull down on dashboard
    • Should refresh entries list
    • Loading indicator appears

  4. Search

    • Type in search bar
    • Should filter entries in real-time
    • Try searching by:
      • Title
      • Content text
      • Tag name
    • Clear search (tap ✕)
    • Should show all entries again

✅ Entry Creation

  1. Create New Entry

    • Tap "+ New" button on dashboard
    • Should open Entry Editor
    • Title: Enter a title (optional)
    • Content: Type some text
    • Wait 5 seconds → Should auto-save (check for "Saved" timestamp)
    • Add tags:
      • Type tag name
      • Tap "Add" or press Enter
      • Tag should appear as chip
      • Tap × on tag to remove
    • Select mood:
      • Tap a mood button
      • Should highlight selected mood
      • Tap again to deselect
    • Tap "Save"
    • Should navigate to Entry Detail screen
    • Verify entry appears in dashboard

  2. Auto-save

    • Create new entry
    • Type content
    • Wait 5 seconds without saving
    • Check header for "Saved [time]" message
    • Close app and reopen
    • Entry should still be there (auto-saved)

✅ Entry Viewing

  1. View Entry Detail

    • Tap an entry card on dashboard
    • Should open Entry Detail screen
    • Verify shows:
      • Full title
      • Full content
      • Absolute date
      • Moon phase icon
      • All tags
      • Notebook info (if assigned)
      • Created/Updated timestamps

  2. Navigation

    • Tap back button
    • Should return to dashboard
    • Scroll position should be preserved

✅ Entry Editing

  1. Edit Entry

    • Open an entry you own
    • Tap "Edit" button
    • Should open Entry Editor with existing data
    • Modify title, content, tags, or mood
    • Wait 5 seconds → Should auto-save
    • Tap "Save"
    • Should return to Entry Detail
    • Verify changes are saved

  2. Unsaved Changes Warning

    • Open entry editor
    • Make changes
    • Tap "Cancel" before saving
    • Should show warning dialog
    • Tap "Stay" → Should remain in editor
    • Tap "Cancel" again → Tap "Leave"
    • Should return to previous screen

✅ Entry Deletion

  1. Delete Entry
    • Open an entry you own
    • Tap "Delete" button
    • Should show confirmation dialog
    • Tap "Cancel" → Should stay on screen
    • Tap "Delete" again → Tap "Delete" in dialog
    • Should return to dashboard
    • Entry should be removed from list

✅ Edge Cases

  1. Empty States

    • Sign in with new account (no entries)
    • Dashboard should show "No entries yet" message

  2. Network Errors

    • Turn off WiFi/data
    • Try to create entry
    • Should show error message
    • Turn on WiFi/data
    • Try again → Should work

  3. Validation

    • Try to save entry with no content
    • Should show "Content is required" error

  4. Long Content

    • Create entry with very long text
    • Verify it displays correctly
    • Verify preview truncates properly

Common Issues & Solutions

Issue: "Cannot connect to Metro bundler"

Solution:

  • Make sure Metro bundler is running (npm start)
  • Check that port 8081 is not in use
  • Try restarting Metro: Press r in terminal or restart server

Issue: "Network request failed"

Solution:

  • Check .env file exists and has correct values
  • Verify API URL is accessible (try in browser)
  • Check Supabase URL and keys are correct
  • Ensure backend is running on Railway

Issue: "Module not found"

Solution:

cd apps/mobile
rm -rf node_modules
npm install

Issue: App won't load on device

Solution:

  • Make sure phone and computer are on same WiFi network
  • Try using tunnel mode: npm start -- --tunnel
  • Check firewall isn't blocking port 8081

Issue: Auto-save not working

Solution:

  • Check that content has at least some text
  • Wait full 5 seconds after last keystroke
  • Check console for errors
  • Verify API endpoint is accessible

Testing on Different Platforms

iOS

  • Test on iPhone simulator (various sizes)
  • Test on physical iPhone if possible
  • Check dark mode support

Android

  • Test on Android emulator
  • Test on physical Android device
  • Check various screen sizes

Performance Testing

  1. Scroll Performance

    • Scroll through many entries
    • Should remain smooth (60fps)
    • No lag when loading more entries

  2. Search Performance

    • Type quickly in search
    • Should filter smoothly
    • No lag with many entries

  3. Auto-save Performance

    • Type quickly
    • Should not block UI
    • Should save in background

Next Steps After Testing

If everything works:

  • ✅ Ready for production build
  • ✅ Can add additional features
  • ✅ Can optimize performance

If issues found:

  • Document bugs in issues
  • Fix critical issues first
  • Test again after fixes
REACT NATIVE TESTING — Docs | HiveJournal