test-create-integration

Create Integration Tests

FOCUS: End-to-end workflows, API integrations, and multi-component interactions

EVALUATE NEED: Integration tests are for complex workflows that span multiple components or systems.

Please create integration test coverage for complex user workflows and component interactions, following our vitest-based testing standards.

🧪 MANDATORY TESTING FRAMEWORK REQUIREMENTS

Testing Stack (NO EXCEPTIONS)

• Primary Framework: vitest (NEVER Jest)
• DOM Environment: happy-dom
• Component Testing: @testing-library/react
• User Interactions: @testing-library/user-event
• API Mocking: MSW (Mock Service Worker)
• Mocking: Built-in vitest mocking capabilities

File Structure & Naming (STRICTLY ENFORCED)

• Location: Co-located in __tests__/ subdirectories next to components
• Integration Tests: ComponentName.integration.test.tsx

📋 INTEGRATION TEST REQUIREMENTS

Consider Integration Tests For:

• ✅ Authentication flows
• ✅ Form submissions with validation
• ✅ Multi-step user journeys
• ✅ API data fetching and state updates
• ✅ Component communication
• ✅ Context provider interactions
• ✅ Navigation and routing workflows
• ✅ Complex state management scenarios

Integration Tests Must Include:

• Real API calls (using MSW for mocking)
• End-to-end user workflows
• Cross-component data flow
• State management integration
• Error handling across components
• Loading states and transitions
• User journey completion scenarios

🔧 IMPLEMENTATION STANDARDS

Integration Test Template

import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { server } from '@/test/mocks/server'
import { http, HttpResponse } from 'msw'
import { ComponentName } from './ComponentName'

describe('ComponentName Integration', () => {
  beforeEach(() => {
    server.listen()
  })

  afterEach(() => {
    server.resetHandlers()
  })

  it('should complete user workflow end-to-end', async () => {
    const user = userEvent.setup()
    
    // Mock API response
    server.use(
      http.post('/api/submit', () => {
        return HttpResponse.json({ success: true })
      })
    )

    render(<ComponentName />)
    
    // Simulate complete user workflow
    await user.type(screen.getByLabelText('Email'), '[email protected]')
    await user.click(screen.getByRole('button', { name: 'Submit' }))
    
    // Verify end result
    await waitFor(() => {
      expect(screen.getByText('Success!')).toBeInTheDocument()
    })
  })

  it('should handle API errors gracefully', async () => {
    const user = userEvent.setup()
    
    // Mock API error
    server.use(
      http.post('/api/submit', () => {
        return new HttpResponse(null, { status: 500 })
      })
    )

    render(<ComponentName />)
    
    await user.click(screen.getByRole('button', { name: 'Submit' }))
    
    await waitFor(() => {
      expect(screen.getByText('Something went wrong')).toBeInTheDocument()
    })
  })
})