Test-Driven React: Find Problems Early, Fix Them Quickly, Code with Confidence

by Trevor Burnham

Overview

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 find and fix type errors without even running your code.

What You Need:

You'll need a working knowledge of JavaScript or TypeScript, and a computer running macOS, Windows, or Linux.

Product Details

ISBN-13:	9798888651407
Publisher:	Pragmatic Bookshelf
Publication date:	09/18/2024
Sold by:	Barnes & Noble
Format:	eBook
Pages:	174
File size:	5 MB

About the Author

Trevor Burnham is an engineer at HubSpot in Cambridge, MA. His previous books include CoffeeScript and Async JavaScript, both published by PragProg.

Table of Contents

Acknowledgments vii

Introduction ix

1 Test-Driven Development with Jest 1

Introducing Jest 2

The Tao of Test-Driven Development 9

Mantra: Red, Green, Repeat 14

2 Integrated Tooling with VS Code 17

Editing with VS Code 18

Checking Code Quality with ESLint 30

Beautifying Code with Prettier 36

Real-Time Testing with Wallaby 41

Mantra: Live in the Code 45

3 Testing React with Enzyme 49

Starting a React Project 49

Testing Simple Components with Enzyme 60

Adding a Jest Setup File 67

Testing Nested Markup 68

Testing Stateful Components 75

Mantra: Test One Piece at a Time 87

4 Styling in JavaScript with Styled-Components 89

Packaging an App with webpack 90

Getting Started with Styled-Components 99

Testing Styled Components 108

Mantra: Actively Seek Feedback 121

5 Refactoring with Higher-Order Components 123

Making Higher-Order Components 123

The Controllable Pattern 133

Stacking Higher-Order Components 139

Inspecting Components with React Devtools 144

Mantra: Keep the Unit Small 145

6 Continuous Integration and Collaboration 147

Setting Up Travis CI 148

Git Hooks with Husky 152

Adding Docs with Storybook 154

Mantra: Actively Automate 162

Index 163