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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Section 1: First Principles of TDD

Section 1: First Principles of TDD

First Steps with Test-Driven Development

First Steps with Test-Driven Development

Technical requirements

Creating a new React project from scratch

Displaying data with your first test

Refactoring your work

Writing great tests

Rendering lists and detail views

Further learning

Test-driving Data Input with React

Test-driving Data Input with React

Extracting a test helper

Adding a form element

Accepting text input

Selecting from a dropdown

Making a choice from radio buttons

Further learning

Exploring Test Doubles

Exploring Test Doubles

What is a test double?

Submitting forms using spies

Stubbing the fetch API

Extracting test helpers

Further learning

Creating a User Interface

Creating a User Interface

Fetching data on load with useEffect

Using props within useEffect

Passing customer data through to AppointmentForm

Working with the shallow renderer

Building a new root component

Further learning

Section 2: Building a Single-Page Application

Section 2: Building a Single-Page Application

Humanizing Forms

Humanizing Forms

Performing client-side validation

Handling server errors

Indicating that the form has been submitted

Further learning

Filtering and Searching Data

Filtering and Searching Data

Displaying tabular data fetched from an endpoint

Paging through a large data set

Adding table row actions

Test-driving React Router

Test-driving React Router

General rules for test-driving React Router

Building a root component

Using the location query string to store component state

Further learning

Test-driving Redux

Test-driving Redux

Test-driving a Redux saga

Making asynchronous requests with sagas

Switching out component state for Redux state

Shifting workflow to Redux

Further learning

Test-driving GraphQL

Test-driving GraphQL

Installing Relay

Testing the Relay environment

Building the GraphQL reducer

Building the CustomerHistory component

Further learning

Section 3: Interactivity

Section 3: Interactivity

Building a Logo Interpreter

Building a Logo Interpreter

Studying the Spec Logo user interface

Undoing and redoing user actions in Redux

Saving to LocalStorage via Redux middleware

Changing keyboard focus

Further learning

Adding Animation

Adding Animation

Isolating components for animation

Animating with requestAnimationFrame

Working with WebSockets

Working with WebSockets

Designing a WebSocket interaction

Test-driving a WebSocket connection

Streaming events with redux-saga

Updating the app

Further learning

Section 4: Acceptance Testing with BDD

Section 4: Acceptance Testing with BDD

Writing Your First Acceptance Test

Writing Your First Acceptance Test

Integrating Cucumber and Puppeteer into your code base

Writing your first Cucumber test

Using data tables to perform setup

Adding Features Guided by Acceptance Tests

Adding Features Guided by Acceptance Tests

Adding acceptance tests for a dialog box

Fixing acceptance tests by test-driving production code

Adding better wait support

Understanding TDD in the Wider Testing Landscape

Understanding TDD in the Wider Testing Landscape

Test-driven development as a testing technique

Automated testing

Not testing at all

Further learning

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Indicating that the form has been submitted

It'd be great if we could indicate to the user that their form data is being sent to our application servers. The GitHub repository for this book contains a spinner graphic and some Cascading Style Sheets (CSS) that we can use. All that our React component needs to do is display span with a class name of submittingIndicator.

Before we write out the tests, let's look at how the production code will work. We will introduce a new submitting boolean state variable that is used to toggle between states. It will be toggled to true just before we perform the fetch request, and toggled to false once the request completes. Here's how we'll modify handleSubmit:

const handleSubmit = async e => {
  e.preventDefault();
  const validationResult = validateMany(validators, customer);
  if (!anyErrors(validationResult)) {
    setSubmitting...