Integrating, Testing and Debugging the Capstone

Integration is where most capstone projects stall. Each layer works in isolation — the Express API passes Postman tests, the React components render correctly in Storybook — but when they connect to each other, things break in ways that did not appear during isolated development. CORS errors, environment variable mismatches, wrong API response shapes, missing auth headers — these are the bugs that integration tests exist to catch early. In this lesson you will systematically connect the React frontend to the Express API, run the full test suites, write E2E tests for the critical flows, and work through the most common integration problems with a debugging methodology that applies to any MERN project.

Integration Debugging Methodology #

When a feature does not work end-to-end, isolate the layer:

Step 1: Is the API working? (Postman)
  → Call the endpoint directly in Postman
  → If it fails: Express bug — fix in the server layer
  → If it succeeds: the problem is in React or the connection

Step 2: Is the React request reaching the API? (Browser DevTools)
  → Open Network tab → trigger the action → find the XHR/Fetch request
  → If no request: Axios call not made — React bug
  → If request shows "CORS error": fix CORS on Express or proxy
  → If request reaches server but wrong data: check request body and headers

Step 3: Is the response correct? (Browser DevTools → Response tab)
  → 401? Check Authorization header — is the token being sent?
  → 404? Check the URL — does it match the Express route?
  → 422/400? Check the request body — required fields missing?
  → 200 but wrong data? Check that populate() is called on the right fields

Step 4: Is React using the response correctly?
  → console.log(res.data) — does the shape match what the component expects?
  → Is it res.data.data or res.data? Check the Express response envelope

Vite Proxy Configuration #

// client/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path  from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
  server: {
    proxy: {
      '/api': {
        target:      'http://localhost:5000',
        changeOrigin: true,
        secure:       false,
        // All /api/* requests are forwarded to Express at localhost:5000
        // The browser sees them as same-origin — no CORS issues in dev
      },
    },
  },
  test: {
    globals:     true,
    environment: 'jsdom',
    setupFiles:  ['./src/test/setup.js'],
  },
});

Common Integration Problems and Fixes #

Running the Full Test Suite #

# Server integration tests
cd server
npm test -- --forceExit
# Expected: all auth, post, comment, user routes pass

# Client component tests
cd ../client
npm test -- --run
# Expected: PostCard, FormField, LoginPage tests pass

# E2E tests (with both servers running)
cd ..
npx playwright test --headed  # see the browser
# Expected: register, login, create post flows pass

Playwright E2E — Critical Flows #

// e2e/full-flow.spec.js — the complete new-user-to-published-post flow
import { test, expect } from '@playwright/test';

test('new user registers, creates a post, and views it', async ({ page }) => {
  const email = `capstone-${Date.now()}@example.com`;
  const password = 'TestPass@1234';

  // ── Register ───────────────────────────────────────────────────────────────
  await page.goto('/register');
  await page.getByLabel('Name').fill('Capstone Author');
  await page.getByLabel('Email').fill(email);
  await page.getByLabel('Password').fill(password);
  await page.getByLabel('Confirm Password').fill(password);
  await page.getByRole('button', { name: /create account/i }).click();
  await expect(page).toHaveURL(/\/dashboard/);

  // ── Create Post ────────────────────────────────────────────────────────────
  await page.goto('/posts/new');
  await page.getByLabel('Title').fill('My Capstone Post');
  await page.getByLabel('Content').fill(
    'This is the body of my capstone test post with enough words to pass validation.'
  );
  await page.getByLabel('Publish immediately').check();
  await page.getByRole('button', { name: /publish/i }).click();

  // Should redirect to the new post
  await expect(page).toHaveURL(/\/posts\//);
  await expect(page.getByRole('heading', { name: 'My Capstone Post' })).toBeVisible();

  // ── View on Home Page ──────────────────────────────────────────────────────
  await page.goto('/');
  await expect(page.getByText('My Capstone Post')).toBeVisible();

  // ── Logout ─────────────────────────────────────────────────────────────────
  await page.getByRole('button', { name: /log out/i }).click();
  await page.goto('/dashboard');
  await expect(page).toHaveURL(/\/login/); // redirected — no longer authenticated
});

Common Mistakes #

Mistake 1 — Testing without the servers running #

❌ Wrong — Playwright tests fail with connection refused:

Error: connect ECONNREFUSED 127.0.0.1:5173
# React dev server is not running

✅ Correct — use Playwright’s webServer config to auto-start servers, or manually start both before running tests.

Mistake 2 — Not resetting test data between E2E tests #

❌ Wrong — second test fails because the email from the first test is already registered:

await page.getByLabel('Email').fill('test@example.com'); // used in 3 tests
// Second test: 409 Conflict — email already registered

✅ Correct — use unique emails with timestamps: `test-${Date.now()}@example.com`.

Mistake 3 — Skipping the Network tab and guessing at bugs #

❌ Wrong — adding console.logs to every React component without first checking DevTools.

✅ Correct — open Network tab, reproduce the bug, read the failing request and response. The cause is visible in 30 seconds 90% of the time.

Quick Reference — Debugging Checklist #