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

Building a new root component

The Git tag for this section is root-component.

After all that setup, we're now ready to build App, the component that ties everything else together. As a reminder, this component will implement our workflow, switching between three screens:

Initially, it will show the AppointmentsDayViewLoader, along with a button
If the user clicks the button, they will be shown the CustomerForm
Once they've completed that form and submitted the customer to the server, the user will be shown the AppointmentFormLoader and can then book an appointment
Once the appointment has been booked, the user is taken back to viewing the AppointmentsDayViewLoader

Let's get started:

Create a new file, test/App.test.js, with the following setup and the first test:

import React from 'react';
import {
  createShallowRenderer,
  type
} from './shallowHelpers...