Book Image

Mastering React Test-Driven Development

By : Daniel Irvine
Book Image

Mastering React Test-Driven Development

By: Daniel Irvine

Overview of this book

Many programmers are aware of TDD but struggle to apply it beyond basic examples. This book teaches how to build complex, real-world applications using Test-Driven Development (TDD). It takes a first principles approach to the TDD process using plain Jest and includes test-driving the integration of libraries including React Router, Redux, and Relay (GraphQL). Readers will practice systematic refactoring while building out their own test framework, gaining a deep understanding of TDD tools and techniques. They will learn how to test-drive features such as client- and server-side form validation, data filtering and searching, navigation and user workflow, undo/redo, animation, LocalStorage access, WebSocket communication, and querying GraphQL endpoints. The book covers refactoring codebases to use the React Router and Redux libraries. via TDD. Redux is explored in depth, with reducers, middleware, sagas, and connected React components. The book also covers acceptance testing using Cucumber and Puppeteer. The book is fully up to date with React 16.9 and has in-depth coverage of hooks and the ‘act’ test helper.
Table of Contents (21 chapters)
Free Chapter
1
Section 1: First Principles of TDD
6
Section 2: Building a Single-Page Application
12
Section 3: Interactivity
16
Section 4: Acceptance Testing with BDD

What this book covers

Chapter 1, First Steps with Test-Driven Development, introduces Jest and the test-driven development cycle. We use them to build a rendering of customer information on a page.

Chapter 2, Test-driving Data Input with React, covers using React component state to manage the display and saving of forms.

Chapter 3, Exploring Test Doubles, introduces various types of test double that are necessary for testing collaborating objects. The collaborator we use in this chapter is the browser fetch API to send and receive data from our application backend.

Chapter 4, Creating a User Interface, ties everything with a root component that threads together a user journey.

Chapter 5, Humanizing Forms, continues with form building by looking at dealing with client- and server-side validation errors, and adding an indicator to show that data is being submitted.

Chapter 6, Filtering and Searching Data, shows building a search component with some complex interaction requirements, in addition to complex fetch request requirements.

Chapter 7, Test-driving React Router, introduces the React Router library to simplify navigation with our user journeys.

Chapter 8, Test-driving Redux, introduces Redux into our application in an effort to simplify our components and evolve our application architecture into something that will support larger use cases.

Chapter 9, Test-driving GraphQL, introduces the GraphQL library to communicate with a GraphQL endpoint that's provided by our application backend.

Chapter 10, Building a Logo Interpreter, introduces a fun application that we begin to explore by building out features across both React components and Redux middleware: undo/redo, persisting state across browser sessions with LocalStorage API, and programmatically managing field focus.

Chapter 11, Adding Animation, covers adding animations to our application using the browser requestAnimationFrame API, all with a test-driven approach.

Chapter 12, Working with WebSockets, adds support for WebSocket communication with our application backend.

Chapter 13, Writing Your First Acceptance Test, introduces CucumberJS and Puppeteer, which we use to build acceptance tests for existing functionality.

Chapter 14, Adding Features Guided by Acceptance Tests, integrates acceptance testing into our development process by first building acceptance tests, before dropping down to unit tests.

Chapter 15, Understanding TDD in the Wider Testing Landscape, finishes the book by looking at how what we've learned fits in with other test and quality practices, and provides some suggestions about where to go from here.