Book Image

Mastering React Test-Driven Development - Second Edition

By : Daniel Irvine
Book Image

Mastering React Test-Driven Development - Second Edition

By: Daniel Irvine

Overview of this book

Test-driven development (TDD) is a programming workflow that helps you build your apps by specifying behavior as automated tests. The TDD workflow future-proofs apps so that they can be modified without fear of breaking existing functionality. Another benefit of TDD is that it helps software development teams communicate their intentions more clearly, by way of test specifications. This book teaches you how to apply TDD when building React apps. You’ll create a sample app using the same React libraries and tools that professional React developers use, such as Jest, React Router, Redux, Relay (GraphQL), Cucumber, and Puppeteer. The TDD workflow is supported by various testing techniques and patterns, which are useful even if you’re not following the TDD process. This book covers these techniques by walking you through the creation of a component test framework. You’ll learn automated testing theory which will help you work with any of the test libraries that are in standard usage today, such as React Testing Library. This second edition has been revised with a stronger focus on concise code examples and has been fully updated for React 18. By the end of this TDD book, you’ll be able to use React, Redux, and GraphQL to develop robust web apps.

Related Content you might be interested in

Current Title:

Small book image
Mastering React Test-Driven Development - Second Edition
Daniel Irvine
Sep, 2022 | 564 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 (26 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Part 1 – Exploring the TDD Workflow
Part 1 – Exploring the TDD Workflow
Free Chapter
2
Chapter 1: First Steps with Test-Driven Development
Chapter 1: 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
Summary
Further reading
3
Chapter 2: Rendering Lists and Detail Views
Chapter 2: Rendering Lists and Detail Views
Technical requirements
Sketching a mock-up
Creating the new component
Specifying list item content
Selecting data to view
Manually testing our changes
Summary
Exercises
Further reading
4
Chapter 3: Refactoring the Test Suite
Chapter 3: Refactoring the Test Suite
Technical requirements
Pulling out reusable rendering logic
Creating a Jest matcher using TDD
Extracting DOM helpers
Summary
Exercises
Further reading
5
Chapter 4: Test-Driving Data Input
Chapter 4: Test-Driving Data Input
Technical requirements
Adding a form element
Accepting text input
Submitting a form
Duplicating tests for multiple form fields
Summary
Exercises
6
Chapter 5: Adding Complex Form Interactions
Chapter 5: Adding Complex Form Interactions
Technical requirements
Choosing a value from a select box
Constructing a calendar view
Test-driving radio button groups
Reducing effort when constructing components
Summary
Exercises
Further reading
7
Chapter 6: Exploring Test Doubles
Chapter 6: Exploring Test Doubles
Technical requirements
What is a test double?
Submitting forms using spies
Spying on the fetch API
Stubbing fetch responses
Migrating to Jest’s built-in test double support
Summary
Exercises
Further reading
8
Chapter 7: Testing useEffect and Mocking Components
Chapter 7: Testing useEffect and Mocking Components
Technical requirements
Mocking child components
Fetching data on mount with useEffect
Building matchers for component mocks
Variants of the jest.mock call
Summary
Exercises
Further reading
9
Chapter 8: Building an Application Component
Chapter 8: Building an Application Component
Technical requirements
Formulating a plan
Using state to control the active view
Test-driving callback props
Making use of callback values
Summary
Exercises
10
Part 2 – Building Application Features
Part 2 – Building Application Features
11
Chapter 9: Form Validation
Chapter 9: Form Validation
Technical requirements
Performing client-side validation
Handling server errors
Indicating form submission status
Summary
Exercises
Further reading
12
Chapter 10: Filtering and Searching Data
Chapter 10: Filtering and Searching Data
Technical requirements
Displaying tabular data fetched from an endpoint
Paging through a large dataset
Filtering data
Performing actions with render props
Summary
Exercises
13
Chapter 11: Test-Driving React Router
Chapter 11: Test-Driving React Router
Technical requirements
Designing React Router applications from a test-first perspective
Testing components within a router
Testing router links
Testing programmatic navigation
Summary
Exercise
Further reading
14
Chapter 12: Test-Driving Redux
Chapter 12: Test-Driving Redux
Technical requirements
Up-front design for a reducer and a saga
Test-driving a reducer
Test-driving a saga
Switching component state for Redux state
Summary
Exercise
Further reading
15
Chapter 13: Test-Driving GraphQL
Chapter 13: Test-Driving GraphQL
Technical requirements
Compiling the schema before you begin
Testing the Relay environment
Fetching GraphQL data from within a component
Summary
Exercises
Further reading
16
Part 3 – Interactivity
Part 3 – Interactivity
17
Chapter 14: Building a Logo Interpreter
Chapter 14: Building a Logo Interpreter
Technical requirements
Studying the Spec Logo user interface
Undoing and redoing user actions in Redux
Saving to local storage via Redux middleware
Changing keyboard focus
Summary
Further reading
18
Chapter 15: Adding Animation
Chapter 15: Adding Animation
Technical requirements
Designing animation
Building an animated line component
Animating with requestAnimationFrame
Canceling animations with cancelAnimationFrame
Varying animation behavior
Summary
Exercises
19
Chapter 16: Working with WebSockets
Chapter 16: Working with WebSockets
Technical requirements
Designing a WebSocket interaction
Test-driving a WebSocket connection
Streaming events with redux-saga
Updating the app
Summary
Exercises
Further reading
20
Part 4 – Behavior-Driven Development with Cucumber
Part 4 – Behavior-Driven Development with Cucumber
21
Chapter 17: Writing Your First Cucumber Test
Chapter 17: Writing Your First Cucumber Test
Technical requirements
Integrating Cucumber and Puppeteer into your code base
Writing your first Cucumber test
Using data tables to perform setup
Summary
22
Chapter 18: Adding Features Guided by Cucumber Tests
Chapter 18: Adding Features Guided by Cucumber Tests
Technical requirements
Adding Cucumber tests for a dialog box
Fixing Cucumber tests by test-driving production code
Avoiding timeouts in test code
Summary
Exercise
23
Chapter 19: Understanding TDD in the Wider Testing Landscape
Chapter 19: Understanding TDD in the Wider Testing Landscape
Test-driven development as a testing technique
Manual testing
Automated testing
Not testing at all
Summary
Further reading
24
Index
Index
Why subscribe?
25
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you

Designing animation

As you read through this section, you may wish to open src/Drawing.js and read the existing code to understand what it’s doing.

The current Drawing component shows a static snapshot of how the drawing looks at this point. It renders a set of Scalable Vector Graphics (SVG) lines to represent the path the turtle has taken to this point, and a triangle to represent the turtle.

The component makes use of two child components:

  • The Turtle component is displayed once and draws an SVG triangle at the given location
  • The StaticLines component is a set of SVG lines that are drawn onscreen to represent the drawn commands

We will add a new AnimatedLine component that represents the current line being animated. As lines complete their animation, they will move into the StaticLines collection.

We’ll need to do some work to convert this from a static view to an animated representation.

As it stands, the component takes a turtle prop...

Previous Section
End of Section 3
Next Section