Mastering React Test-Driven Development: Build rock-solid, well-tested web apps with React, Redux and GraphQL

✍ Scribed by Daniel Irvine

• Publisher: Packt Publishing
• Year: 2019
• Tongue: English
• Leaves: 483
• Category: Library

✦ Synopsis

Implement TDD for your React applications using Jest, React Router, Redux, and GraphQL/Relay. Learn BDD and end-to-end acceptance testing with CucumberJS and Puppeteer.

Key Features

• Learn the TDD process using the React framework
• Build complex, real-world applications with a pragmatic approach to TDD
• Use Cucumber for acceptance and BDD testing, bringing TDD to the wider team

Book Description

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.

What you will learn

• Build test-driven applications using React 16.9+ and Jest
• Build complete web applications using a variety of HTML input elements
• Understand the different types of test double and when to apply them
• Test-drive the Integration of libraries such as React Router, Redux, and Relay (GraphQL)
• Learn when to be pragmatic and how to apply TDD shortcuts
• Test-drive interaction with browser APIs including fetch and WebSockets
• Use Cucumber.js and Puppeteer to build BDD-style acceptance tests for your applications
• Build and test async Redux code using redux-saga and expect-redux

Who this book is for

The target audience for this book is JavaScript developers who are looking to implement test-driven and behavior-driven approaches for their React applications.

Table of Contents

1. First Steps with Test-Driven Development
2. Test-driving Data Input with React
3. Exploring Test Doubles
4. Creating a User Interface
5. Humanizing Forms
6. Filtering and Searching Data
7. Test-driving React Router
8. Test-driving Redux
9. Test-driving GraphQL
10. Building a Logo Interpreter
11. Adding Animation
12. Working with WebSockets
13. Writing Your First Acceptance Test
14. Adding Features Guided by Acceptance Tests
15. Understanding TDD in the Wider Testing Landscape

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Table of Contents
Preface
Section 1: First Principles of TDD
Chapter 1: First Steps with Test-Driven Development
Technical requirements
Creating a new React project from scratch
Installing NPM
Creating a new Jest project
Commit early and often
Bringing in React and Babel
Displaying data with your first test
Writing a failing test
Writing your first expectation
Rendering React from a test
Make it pass
Backtracking on ourselves
Refactoring your work
Promoting variables
Using a beforeEach block
Extracting methods
Writing great tests
Red, green, refactor
Streamlining your testing process
Rendering lists and detail views
Rendering the list of appointments
Specifying list items
Selecting data to view
Initial selection of data
Adding events to a functional component
Manually testing our changes
Adding an entrypoint
Putting it all together with Webpack
Before you check in...
Summary
Exercises
Further learning
Chapter 2: Test-driving Data Input with React
Extracting a test helper
Adding a form element
Extracting a form-finder method
Accepting text input
Extracting an expectation group function
Passing in an existing value
Extracting out a field-finder function
Labeling the field
Checking for null or not
Saving the customer information
Submitting a form with data
Using state instead of props
Duplicating fields
Nesting describe blocks
Generating parameterized tests
Solving a batch of tests
Modifying handleChange to work with multiple fields
Finishing off the form with a submit button
Selecting from a dropdown
Providing options to a dropdown
Utilizing defaultProps to specify real data
Pre-selecting a value
Completing the remaining tests for the select box
Making a choice from radio buttons
Constructing a calendar view
Displaying radio buttons for available appointments
Hiding input controls
Finishing it off
Manually testing your solution
Summary
Exercises
Further learning
Chapter 3: Exploring Test Doubles
What is a test double?
Learning to avoid fakes
Submitting forms using spies
Untangling Arrange-Act-Assert
Watching it fail
Making spies reusable
Using a Jest matcher to simplify expectations
Stubbing the fetch API
Replacing global variables with spies
Installing the window.fetch polyfill
Acting on return values with stubs
Acting on the fetch response
Displaying errors to the user
Extracting test helpers
Using Jest to spy and stub
Extracting spy helpers
Using jest.spyOn to spy on module mocks
Drying up DOM queries
Extracting container.querySelectorAll
Drying up DOM events
Summary
Exercises
Further learning
Chapter 4: Creating a User Interface
Fetching data on load with useEffect
Stubbing exported constants
Using props within useEffect
Passing customer data through to AppointmentForm
Passing through props to the child component
Working with the shallow renderer
Understanding the importance of spiking
Building shallow renderer helpers
Listing element children
Encapsulating render output to dry up tests
Building a new root component
Summary
Further learning
Section 2: Building a Single-Page Application
Chapter 5: Humanizing Forms
Performing client-side validation
Submitting the form
Extracting non-React functionality into a new module
Handling server errors
Indicating that the form has been submitted
Refactoring long methods
Summary
Exercises
Further learning
Chapter 6: Filtering and Searching Data
Displaying tabular data fetched from an endpoint
Paging through a large data set
Adding a next page button
Adding a previous page button
Filtering data
Refactoring to simplify component design
Adding table row actions
Specifying the render prop in App
Summary
Exercises
Chapter 7: Test-driving React Router
General rules for test-driving React Router
Using shallow rendering for the simplest results
Passing React Router props down through your components
Avoiding withRouter
Building a root component
Using the Router Switch component
Testing the default route
Invoking render functions and inspecting their properties
Changing location using history.push
Using the location query string to store component state
Replacing onClick handlers with Link components
Using a parent component to convert a query string to props
Replacing onChange handlers with history.push
Summary
Exercises
Further learning
Chapter 8: Test-driving Redux
Prerequisites
Test-driving a Redux saga
Designing the state object
Scaffolding the saga and reducer
Scaffolding a reducer
Setting up an entrypoint
Making asynchronous requests with sagas
Completing the reducer
Pulling out generator functions for reducer actions
Switching out component state for Redux state
Building a helper function to render with store
Submitting a React form by dispatching a Redux action
Protecting against silent breakages
Shifting workflow to Redux
Stubbing out components built with useMemo
Navigating router history in a Redux saga
Separating Redux connection from presentation
Summary
Exercises
Further learning
Chapter 9: Test-driving GraphQL
Installing Relay
Testing the Relay environment
Building the GraphQL reducer
Building the CustomerHistory component
Tying it together in App
Compiling Relay queries
Summary
Exercises
Further learning
Section 3: Interactivity
Chapter 10: Building a Logo Interpreter
Studying the Spec Logo user interface
Looking through the codebase
Undoing and redoing user actions in Redux
Building the reducer
Setting the initial state
Handling the undo action
Handling the redo action
Attaching the new reducer
Building buttons
Saving to LocalStorage via Redux middleware
Building middleware
Changing keyboard focus
Writing the reducer
Adding the reducer to the store
Focusing the prompt
Requesting focus in other components
Summary
Further learning
Chapter 11: Adding Animation
Isolating components for animation
Designing the component
Extracting out StaticLines
Building an AnimatedLine component
Animating with requestAnimationFrame
Drawing lines
Cleaning up after useEffect
Rotating the turtle
Summary
Exercises
Chapter 12: Working with WebSockets
Designing a WebSocket interaction
The new UI elements
Splitting apart the saga
Test-driving a WebSocket connection
Streaming events with redux-saga
Updating the app
Summary
Exercises
Further learning
Section 4: Acceptance Testing with BDD
Chapter 13: 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
Chapter 14: Adding Features Guided by Acceptance Tests
Adding acceptance tests for a dialog box
Fixing acceptance tests by test-driving production code
Adding a dialog box
Updating sagas to reset or replay state
Adding better wait support
Alerting when the animation is complete
Updating step definitions to use waitForSelector
Exercises
Summary
Chapter 15: Understanding TDD in the Wider Testing Landscape
Test-driven development as a testing technique
Best practices for your unit tests
Improving your technique
Manual testing
Demonstrating software
Testing the whole product
Exploratory testing
Debugging in the browser
Automated testing
Integration tests
Acceptance tests
Property-based and generative testing
Snapshot testing
Canary testing
Not testing at all
When quality doesn't matter
Spiking and deleting code
Summary
Further learning
Other Books You May Enjoy
Index