Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Learners who want confidence before refactor, merge, or release
• Beginners who are unsure what to test first
• Anyone who wants tests that catch real bugs without slowing development too much

What you’ll learn

• Clear difference between unit, integration, and E2E tests
• Practical test patterns with Vitest or Jest
• How to write React Testing Library tests that focus on user behavior

Why this topic matters

Testing is your safety net. Without it, every change feels risky.

Good tests catch regressions early, reduce manual rechecking, and make refactoring way less stressful. In teams, this directly improves release confidence.

Core concepts

Unit tests

• Test one function/component behavior in isolation

Best for pure logic and utility functions.

Integration tests

• Test interaction between parts (e.g., form + validation + submit)

Great for validating feature-level behavior end to end inside the app layer.

E2E tests

• Simulate user flows across whole app

Use E2E for critical business flows, not every tiny scenario.

Step-by-step walkthrough

Step 1 — Start with utility tests

Start with pure functions. They are quick to test and easy to debug.

Step 2 — Add component interaction tests

Test what users can see and do: typing, clicking, submitting, and feedback messages.

Step 3 — Define minimum coverage targets

Set minimum coverage for critical paths first.

Target confidence, not vanity metrics.

Practical examples

Example 1 — Utility function test

it("formats score", () => {
	expect(formatScore("Nina", 90)).toBe("Nina: 90");
});

Tip:

• Utility tests are the fastest way to build testing habit.

Example 2 — React interaction test

• Render form component
• Fill input and click submit
• Assert success or error message appears

Focus rule:

• Prefer queries by role/label/text that reflect real user behavior.

Common mistakes and how to avoid them

• Testing implementation details too deeply -> test user-observable behavior
• Writing fragile selectors -> use accessible queries (getByRole, getByLabelText)
• Ignoring failure paths -> include error, empty, and loading assertions
• Trying to test everything on day one -> prioritize critical flows first

Mini Project

• Add tests to your previous app covering:
• one utility unit test,
• one form interaction test,
• one API failure-path test.

Bonus:

• Add a tiny E2E smoke test for one key user journey.

Quick practice

• Write one utility unit test
• Write one component interaction test
• Add one failure-path assertion
• Define a “must-test list” for your current project

Key takeaways

• Tests give confidence, especially when refactoring fast
• Behavior-focused tests usually survive internal refactors better
• Small, focused test coverage on critical flows beats chasing 100% coverage

Next step

Continue to [16. Code Quality and Tooling].