Test-Driven React, Second Edition

Find Problems Early, Fix Them Quickly, Code with Confidence

by Trevor Burnham

Turn your React project requirements into tests and get the feedback you need faster than ever before. Combine the power of testing, linting, and typechecking directly in your coding environment to iterate on React components quickly and fearlessly!

You work in a loop: write code, get feedback, adjust. The faster you get feedback, the faster your code improves and the more effective you become as a developer. And that feedback comes from testing.

The conceptual elegance of React has opened the door to a new generation of web testing: clear, expressive, and lightning fast. That makes React a perfect fit for test-driven development (TDD), a methodology in which tests are a blueprint instead of an afterthought.

Each chapter presents new projects to challenge you and new tools to help you:

• Write fast, easy-to-understand tests with Vitest and React Testing Library.
• Keep your code tidy with ESLint and Prettier.
• Perform every task you need from a single window within VS Code.
• See your test output directly in your code with Wallaby.
• Style components in a test-friendly way with styled-components.
• Stay focused on what’s important by running your tests continuously in the background.
• Generate beautiful documentation with Storybook, and update it on every commit with GitHub Actions.

The second edition of Test-Driven React has been extensively revised to reflect the latest tools and techniques for React development, including TypeScript. Each chapter presents new projects to challenge you and new tools to help you detect and fix bugs in your code.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• P1.0 2024/09/25
• B4.0 2024/09/04
• B3.0 2024/07/10
• B2.0 2024/04/18

• Introduction
  • What’s in This Book
  • What’s Not in This Book
  • What’s New in the Second Edition
  • How to Read the Code Examples
  • Online Resources
  • Mantra: Code with Joy
• Test-Driven Development with Jest
  • Introducing Jest
  • The Tao of Test-Driven Development
  • Mantra: Red, Green, Repeat
  • Example Fizz Buzz Solution
• Integrated Tooling with VS Code
  • Editing with VS Code
  • Checking Code Quality with ESLint
  • Beautifying Code with Prettier
  • Real-Time Testing with Wallaby
  • Mantra: Live in the Code
  • Example Palindrome Finder Solution
• Testing React with Testing Library
  • Starting a React Project
  • Testing Simple Components with React Testing Library
  • Testing Nested Markup excerpt
  • Testing Stateful Components
  • Mantra: Test One Piece at a Time
• Styling in JavaScript with Styled-Components
  • Adding an Example Page
  • Getting Started with Styled-Components
  • Testing Styled Components excerpt
  • Taking Snapshots of Styles
  • Mantra: Actively Seek Feedback
• Refactoring with Hooks
  • Making Custom Hooks
  • The Controllable Pattern
  • Testing with Timers
  • Setting Timers with the useEffect Hook
  • Preventing Unnecessary Updates with useCallback and useRef
  • Inspecting Components with React Devtools
  • Mantra: Keep the Unit Small
• Continuous Integration and Collaboration
  • Setting up Travis CI
  • Git Hooks with Husky
  • Adding Docs with Storybook
  • Mantra: Actively Automate