← Back to Tutorials Chapter 11

Testing & Deployment

Why Test React Apps?

Automated tests catch regressions, document expected behavior, and give you confidence when refactoring. The React ecosystem standard on Jest (test runner) and React Testing Library (RTL) for component tests.

Unit Testing with Jest & RTL

Jest provides describe, it/test, expect, and mock. RTL provides utilities to render components and query rendered output.

import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter";

test("increments count when button is clicked", () => {
  render(<Counter />);
  const button = screen.getByRole("button", { name: /increment/i });
  fireEvent.click(button);
  expect(screen.getByText("1")).toBeInTheDocument();
});

Snapshot Testing

Snapshot tests capture the rendered output and compare it to a stored reference file. Use them for UI components that rarely change.

import { render } from "@testing-library/react";
import Header from "./Header";

test("Header matches snapshot", () => {
  const { container } = render(<Header title="Home" />);
  expect(container.firstChild).toMatchSnapshot();
});

Testing Hooks

Use renderHook from RTL to test custom hooks outside of a component.

import { renderHook, act } from "@testing-library/react";
import useCounter from "./useCounter";

test("useCounter increments value", () => {
  const { result } = renderHook(() => useCounter(0));
  act(() => result.current.increment());
  expect(result.current.count).toBe(1);
});

React CLI Commands

Create React App provides four commands via react-scripts:

• npm start — starts dev server on localhost:3000
• npm run build — creates an optimized production build in build/
• npm test — runs Jest in watch mode
• npm run eject — exposes all config files (irreversible)

Building for Production

Running npm run build generates minified, tree-shaken bundles with content hashes for cache busting. The build/ folder can be served by any static file server.

npx create-react-app my-app
cd my-app
npm run build
# Output in build/ ready for deployment

Deploying to Vercel

Vercel is optimized for frontend apps. Connect your Git repository or use the CLI:

npm install -g vercel
vercel
# Follow prompts — it auto-detects Create React App

Deploying to Netlify

Netlify supports drag-and-drop of the build/ folder or Git-based CI/CD. Set the build command to npm run build and publish directory to build.

Deploying to GitHub Pages

For GitHub Pages, install gh-pages and add a homepage field to package.json.

npm install --save-dev gh-pages

// package.json
"homepage": "https://yourname.github.io/my-app",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

npm run deploy

Example Project Walkthrough

A typical full-stack React project might include a Node/Express API, a PostgreSQL database, and a React frontend. Alternatively, a static site (e.g. a portfolio blog) is deployed directly from the build/ folder to any static host.