Write integration tests for key workflows

// test/api/users.integration.test.js
import { describe, it, expect, beforeAll, afterAll } from 'vitest'
import supertest from 'supertest'
import { app } from '../src/app.js'
import { db } from '../src/db.js'
 
describe('POST /api/users', () => {
  beforeAll(async () => {
    await db.migrate.latest()
    await db.seed.run()
  })
 
  afterAll(async () => {
    await db.destroy()
  })
 
  it('creates a user with valid data', async () => {
    const response = await supertest(app)
      .post('/api/users')
      .send({ name: 'Alice', email: 'alice@example.com' })
      .expect(201)
 
    expect(response.body).toMatchObject({
      id: expect.any(Number),
      name: 'Alice',
      email: 'alice@example.com'
    })
 
    // Verify it was actually saved
    const saved = await db('users').where({ email: 'alice@example.com' }).first()
    expect(saved).toBeDefined()
  })
 
  it('returns 400 for duplicate email', async () => {
    await supertest(app)
      .post('/api/users')
      .send({ name: 'Bob', email: 'existing@example.com' })
      .expect(400)
  })
})

// test/UserProfileForm.integration.test.jsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { QueryClientProvider } from '@tanstack/react-query'
import { UserProfileForm } from '../src/components/UserProfileForm'
import { server } from './mocks/server'
import { rest } from 'msw'
 
describe('UserProfileForm', () => {
  it('submits updated profile and shows success message', async () => {
    const user = userEvent.setup()
 
    render(
      <QueryClientProvider client={queryClient}>
        <UserProfileForm userId={1} />
      </QueryClientProvider>
    )
 
    // Fill in the form
    const nameInput = screen.getByLabelText('Full name')
    await user.clear(nameInput)
    await user.type(nameInput, 'Alice Updated')
 
    // Submit
    await user.click(screen.getByRole('button', { name: 'Save changes' }))
 
    // Verify success feedback (tests form + API call + state update + UI render)
    await waitFor(() => {
      expect(screen.getByText('Profile saved successfully')).toBeInTheDocument()
    })
  })
 
  it('shows field errors when API returns validation failure', async () => {
    server.use(
      rest.put('/api/users/:id', (req, res, ctx) =>
        res(ctx.status(422), ctx.json({ errors: { name: 'Name is too long' } }))
      )
    )
 
    // ... test error display
  })
})

High-value integration test targets:
✓ API routes + database queries (the full server-side stack)
✓ Form components + submission + API response + UI feedback
✓ Authentication flows (login → session → protected route)
✓ Shopping cart + checkout + order creation
✓ File upload + processing + storage + thumbnail display
✓ Search input + query → results display
 
Skip (better as unit tests):
✗ Pure utility functions
✗ Simple transformations
✗ Components with no external dependencies