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.

Related Content you might be interested in

Current Title:

Small book image
Mastering React Test-Driven Development
Daniel Irvine
May, 2019 | 496 pages
Small book image
Svelte with Test-Driven Development
Daniel Irvine
Jun, 2023 | 250 pages
Small book image
Learning Redux
Daniel Bugl
Aug, 2017 | 374 pages
Table of Contents (21 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Section 1: First Principles of TDD
Section 1: First Principles of TDD
2
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
Summary
Exercises
Further learning
3
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
Summary
Exercises
Further learning
4
Exploring Test Doubles
Exploring Test Doubles
What is a test double?
Submitting forms using spies
Stubbing the fetch API
Extracting test helpers
Summary
Exercises
Further learning
5
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
Summary
Further learning
6
Section 2: Building a Single-Page Application
Section 2: Building a Single-Page Application
7
Humanizing Forms
Humanizing Forms
Performing client-side validation
Handling server errors
Indicating that the form has been submitted
Summary
Exercises
Further learning
8
Filtering and Searching Data
Filtering and Searching Data
Displaying tabular data fetched from an endpoint
Paging through a large data set
Filtering data
Adding table row actions
Summary
Exercises
9
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
Summary
Exercises
Further learning
10
Test-driving Redux
Test-driving Redux
Prerequisites
Test-driving a Redux saga
Making asynchronous requests with sagas
Switching out component state for Redux state
Shifting workflow to Redux
Summary
Exercises
Further learning
11
Test-driving GraphQL
Test-driving GraphQL
Installing Relay
Testing the Relay environment
Building the GraphQL reducer
Building the CustomerHistory component
Summary
Exercises
Further learning
12
Section 3: Interactivity
Section 3: Interactivity
13
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
Summary
Further learning
14
Adding Animation
Adding Animation
Isolating components for animation
Animating with requestAnimationFrame
Summary
Exercises
15
Working with WebSockets
Working with WebSockets
Designing a WebSocket interaction
Test-driving a WebSocket connection
Streaming events with redux-saga
Updating the app
Summary
Exercises
Further learning
16
Section 4: Acceptance Testing with BDD
Section 4: Acceptance Testing with BDD
17
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
Summary
18
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
Exercises
Summary
19
Understanding TDD in the Wider Testing Landscape
Understanding TDD in the Wider Testing Landscape
Test-driven development as a testing technique
Manual testing
Automated testing
Not testing at all
Summary
Further learning
20
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Building a root component

In this section, we'll look at some specific tests from the App component once it has been reworked to use React Router. There are a few key points:

  • The initial screen, which contains a button bar and the AppointmentsDayViewLoader, needs to be wrapped in a single component so that we can pass it to the component prop of Route.
  • The Switch component is used to decide which high-level component should be shown. This replaces our own switch.
  • The non-default Route component instances uses a render function to display their components, because they require specific props to be passed in. We'll look at how to avoid this in the next chapter when we introduce Redux.

Using the Router Switch component

...
Previous Section
End of Section 3
Next Section