#React 19 Testing Guide for 5CRSE Custom Event Creation

This document provides guidance on testing the custom event creation components with React 19 and Vitest.

#Setup and Configuration

We've configured a React 19-compatible testing environment with the following key components:

1. setup-react19.ts - Setup file for Vitest that provides:

   • JSX runtime mock for React 19
   • Mocks for Next.js components (Image, Link)
   • Mocks for Lucide icons
   • Global availability of React

2. react19-test-utils.tsx - Custom utilities for React 19 testing:

   • A custom render function that wraps RTL's render
   • Re-exports of common testing functions (screen, waitFor, fireEvent)

3. vitest.config.ts - Configuration for Vitest:

   • Sets JSDOM as the testing environment
   • Uses our custom setup file
   • Defines testing file patterns

4. fix-react-tests.js - Script to update existing tests to be React 19 compatible:

   • Adds the @vitest-environment jsdom directive
   • Updates import statements to use our custom utilities
   • Ensures React is properly imported

#Component Testing Strategy

When testing components in the custom event creation flow, follow these guidelines:

#1. Component Structure

• The components follow a wizard-based flow managed by EventCreationProvider
• Each component updates the global state through the provider's dispatch function
• UI elements include: form controls, cards, visual elements, and navigation

#2. Selecting Elements

Due to React 19 rendering differences, prefer these approaches:

// Instead of:
const element = screen.getByLabelText('Label Text')

// Use:
const label = screen.getByText('Label Text')
const element = label.parentElement?.querySelector('input')

#3. Testing Dynamic Updates

For testing state updates:

// First select a trigger element
fireEvent.click(screen.getByText('Select Escalade'))

// Wait for updates to complete
await waitFor(() => {
  expect(screen.getByText('Selected')).toBeInTheDocument()
})

#4. Form Interactions

Test form interactions by finding elements and triggering events:

// Find input element
const pickupInput = screen.getByPlaceholderText('Enter pickup address')

// Trigger change event
fireEvent.change(pickupInput, { target: { value: '123 Main Street' } })

// Verify update
expect(pickupInput).toHaveValue('123 Main Street')

#Event Creation Components

The custom event creation flow consists of the following components:

1. EventTypeSelection - Select type of event (dining, corporate, etc.)
2. DateTimeSelection - Select date and time for the event
3. VenueSelection - Select venue or location
4. PremiumTransportation - Select luxury vehicle and transportation details
5. GuestManagement - Manage event guests (planned)
6. AddOnServices - Select additional premium services (planned)
7. ReviewConfirm - Review and confirm event details (planned)

#Running Tests

To test a specific component:

pnpm vitest run src/components/CreateEvent/ComponentName.test.tsx --environment=jsdom

To run all component tests:

pnpm test:component

To update test files to be React 19 compatible:

pnpm fix:react19:tests

#Common Issues and Solutions

1. JSX Transform Errors

   • Symptom: "React is not defined" errors
   • Solution: Ensure proper import ordering and use the custom setup file

2. Element Selection Issues

   • Symptom: "Unable to find an element with the role/label" errors
   • Solution: Use alternative selection strategies (text, placeholder, parent-child)

3. Next.js Image Warnings

   • Symptom: Warnings about non-boolean attributes like fill
   • Solution: These can be safely ignored as they don't affect test functionality

4. Testing Context Components

   • Symptom: Components don't have access to context
   • Solution: Always wrap components with the appropriate providers in tests