Follow-Up Assignment: Add Testing and CI to Your Project

First: Protect Your Repository

Before you add tests, configs, or CI files, you must make sure Git is not going to track generated files.

Create a .gitignore file in the project root.

Use at least this:

node_modules/
client/node_modules/
server/node_modules/

client/dist/

test-results/
playwright-report/

.env
server/.env

npm-debug.log*

Now run:

git status

Look carefully at the output.

You should not see:

  • node_modules
  • client/dist
  • test-results
  • .env

If you do see those, stop and fix .gitignore before continuing.

This matters. If you stage files too early, Git will happily commit thousands of generated files that do not belong in your repository.

Next: Prepare Your System for Testing

Your project is a single-port system.

That means:

  • your backend runs on one port: 41xx
  • your built React frontend is served by the backend
  • Playwright should test that same single running app

Do not set this up as a separate frontend server plus backend server for the final testing workflow.

We are testing the app the way it is really deployed.

Step 1: Make Sure the App Works Normally

Before adding tests, confirm that your project already works as a normal application.

From your project:

Backend

Make sure your backend starts on your assigned 41xx port.

Frontend

Make sure your frontend builds successfully.

Full app

Make sure that after building the frontend and starting the backend, you can open the app in the browser and use it.

If the project does not already run correctly, fix that first.

Step 2: Confirm the Single-Port Structure

Your backend should be the thing that serves the built frontend.

That means your app should work like this:

Browser
  ↓
http://10.192.145.179:41xx
  ↓
Express backend
  ├─ serves API
  └─ serves built React frontend

Your React app should not depend on a second frontend server for the final smoke test.

Your frontend code should normally use API calls like:

fetch('/api/your-route')

not hardcoded URLs like:

fetch('http://localhost:4000/api/your-route')

because this assignment assumes one deployed app on one port.

Step 3: Install the Testing Tools

Backend tools

In your backend folder, install:

npm install -D vitest supertest

Frontend tools

In your frontend folder, install:

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

Whole-app testing tools

From the project root, install:

npm install -D @playwright/test
npx playwright install

Step 4: Add Test Scripts

Make sure your backend package.json has:

"scripts": {
  "start": "node index.js",
  "test": "vitest run"
}

Make sure your frontend package.json has:

"scripts": {
  "build": "vite build",
  "test": "vitest run"
}

In the project root, create or update package.json so you can run everything from one command:

{
  "scripts": {
    "test:backend": "cd server && npm test",
    "test:frontend": "cd client && npm test",
    "test:e2e": "playwright test",
    "test": "npm run test:backend && npm run test:frontend && npm run test:e2e"
  }
}

Use your actual folder names if they differ.

Step 5: Prepare the Frontend Test Environment

Create this file:

client/src/test/setup.js

with:

import '@testing-library/jest-dom/vitest';

Then update client/vite.config.js to include frontend test support.

If your app runs on backend port 41xx, your dev proxy should point there:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:41xx'
    }
  },
  test: {
    environment: 'jsdom',
    setupFiles: './src/test/setup.js'
  }
});

Replace 41xx with your actual project port.

Step 6: Prepare the Whole-App Test Environment

Create this file in the project root:

playwright.config.js

Use this pattern for a single-port app:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',

  use: {
    baseURL: 'http://127.0.0.1:41xx'
  },

  webServer: {
    command: 'cd client && npm run build && cd ../server && npm start',
    url: 'http://127.0.0.1:41xx',
    reuseExistingServer: true,
    timeout: 120 * 1000
  }
});

Replace 41xx with your actual port.

This does four things:

  1. tells Playwright where your test files are
  2. builds the frontend
  3. starts the backend
  4. runs browser tests against the real single-port app

Step 7: Check the Test Infrastructure Before Writing Lots of Tests

Before writing your real tests, make sure the infrastructure itself is working.

You should be able to run these separately:

cd server && npm test
cd client && npm test
npx playwright test

Then you should be able to run:

npm test

If these commands do not work, do not move on yet.

Fix the setup first.

Important Rule

Do not try to write a large number of tests before the infrastructure works.

The correct order is:

  1. .gitignore
  2. project runs normally
  3. test tools installed
  4. test commands work
  5. then write actual tests
Scroll to Top