Mastering React Test-Driven Development: Build simple and maintainable web apps with React, Redux, and GraphQL,

✍ Scribed by Daniel Irvine

• Publisher: Packt Publishing
• Year: 2022
• Tongue: English
• Leaves: 565
• Edition: 2
• Category: Library

✦ Synopsis

Learn test-driven and behavior-driven development techniques that will give you greater confidence when building React applications

Key Features

• Explore the TDD process, how it works, and why it will help you write maintainable React apps
• Develop a component testing framework from scratch, which will help you understand the mechanics of good unit testing
• Reduce complexity by using unit tests and end-to-end acceptance tests to drive the design of your apps

Book Description

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.

What you will learn

• Build test-driven applications using React 18 and Jest
• Understand techniques and patterns for writing great automated tests
• Use test doubles and mocks effectively
• Test-drive browser APIs, including the Fetch API and the WebSocket API
• Integrate with libraries such as React Router, Redux, and Relay (GraphQL)
• Use Cucumber.js and Puppeteer to build Behaviour- Driven Development (BDD) style tests for your applications
• Build and test async Redux code using redux-saga and expect-redux

Who this book is for

This book is for frontend developers who are looking to improve their testing practices and increase the quality and maintainability of their applications. To make the most of this book, you'll need knowledge of the JavaScript programming language.

Table of Contents

1. First Steps with Test-Driven Development
2. Rendering Lists and Detail Views
3. Refactoring the Test Suite
4. Test-Driving Data Input
5. Adding Complex Form Interactions
6. Exploring Test Doubles
7. Testing useEffect and Mocking Components
8. Building an Application Component
9. Form Validation
10. Filtering and Searching Data
11. Test-Driving React Router
12. Test-Driving Redux
13. Test-Driving GraphQL
14. Building a Logo Interpreter
15. Adding Animation
16. Working with WebSockets
17. Writing Your First Cucumber Test
18. Adding Features Guided by Cucumber Tests
19. Understanding TDD in the Wider Testing Landscape

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Foreword
Contributors
About the reviewer
Table of Contents
Part 1 – Exploring the TDD Workflow
Chapter 1: First Steps with Test-Driven Development
Technical requirements
Creating a new React project from scratch
Installing NPM
Creating a new Jest project
Bringing in React and Babel
Displaying data with your first test
Writing a failing test
Make it pass
Making use of the act test helper
Triangulating to remove hardcoding
Backtracking on ourselves
Refactoring your work
Sharing setup code between tests
Extracting methods
Writing great tests
Red, green, refactor
Streamlining your testing process
Summary
Further reading
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
Initial selection of data
Adding events to a functional component
Manually testing our changes
Adding an entry point
Putting it all together with webpack
Summary
Exercises
Further reading
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
Chapter 4: Test-Driving Data Input
Technical requirements
Adding a form element
Accepting text input
Submitting a form
Submitting without any changes
Preventing the default submit action
Submitting changed values
Duplicating tests for multiple form fields
Nesting describe blocks
Generating parameterized tests
Solving a batch of tests
Modifying handleChange so that it works with multiple fields
Testing it out
Summary
Exercises
Chapter 5: Adding Complex Form Interactions
Technical requirements
Choosing a value from a select box
Providing select box options
Preselecting a value
Constructing a calendar view
Adding the table
Adding a header column
Adding a header row
Test-driving radio button groups
Hiding input controls
Selecting a radio button in a group
Handling field changes through a component hierarchy
Reducing effort when constructing components
Extracting test data builders for time and date functions
Extracting a test props object
Summary
Exercises
Further reading
Chapter 6: Exploring Test Doubles
Technical requirements
What is a test double?
Learning to avoid fakes
Submitting forms using spies
Untangling AAA
Making a reusable spy function
Using a matcher to simplify spy expectations
Spying on the fetch API
Replacing global functions with spies
Test-driving fetch argument values
Reworking existing tests with the side-by-side implementation
Improving spy expectations with helper functions
Stubbing fetch responses
Upgrading spies to stubs
Acting on the fetch response
Displaying errors to the user
Grouping stub scenarios in nested describe contexts
Migrating to Jest’s built-in test double support
Using Jest to spy and stub
Migrating the test suite to use Jest’s test double support
Extracting fetch test functionality
Summary
Exercises
Further reading
Chapter 7: Testing useEffect and Mocking Components
Technical requirements
Mocking child components
How to mock components, and why?
Testing the initial component props
Fetching data on mount with useEffect
Understanding the useEffect hook
Adding the renderAndWait helper
Adding the useEffect hook
Testing the useEffect dependency list
Building matchers for component mocks
Variants of the jest.mock call
Removing the spy function
Rendering the children of mocked components
Checking multiple instances of the rendered component
Alternatives to module mocks
Summary
Exercises
Further reading
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
Part 2 – Building Application Features
Chapter 9: Form Validation
Technical requirements
Performing client-side validation
Validating a required field
Generalizing validation for multiple fields
Submitting the form
Extracting non-React functionality into a new module
Handling server errors
Indicating form submission status
Testing state before promise completion
Refactoring long methods
Summary
Exercises
Further reading
Chapter 10: Filtering and Searching Data
Technical requirements
Displaying tabular data fetched from an endpoint
Paging through a large dataset
Adding a button to move to the next page
Adjusting the design
Adding a button to move to the previous page
Forcing design changes using tests
Filtering data
Refactoring to simplify the component design
Performing actions with render props
Testing render props in additional render contexts
Summary
Exercises
Chapter 11: Test-Driving React Router
Technical requirements
Designing React Router applications from a test-first perspective
A list of all the React Router pieces
Splitting tests when the window location changes
Up-front design for our new routes
Testing components within a router
The Router component and its test equivalent
Using the Routes component to replace a switch statement
Using intermediate components to translate URL state
Testing router links
Checking the page for hyperlinks
Mocking the Link component
Testing programmatic navigation
Summary
Exercise
Further reading
Chapter 12: Test-Driving Redux
Technical requirements
Up-front design for a reducer and a saga
Why Redux?
Designing the store state and actions
Test-driving a reducer
Pulling out generator functions for reducer actions
Setting up a store and an entry point
Test-driving a saga
Using expect-redux to write expectations
Making asynchronous requests with sagas
Switching component state for Redux state
Submitting a React form by dispatching a Redux action
Making use of store state within a component
Navigating router history in a Redux saga
Summary
Exercise
Further reading
Chapter 13: Test-Driving GraphQL
Technical requirements
Compiling the schema before you begin
Testing the Relay environment
Building a performFetch function
Test-driving the Environment object construction
Test-driving a singleton instance of Environment
Fetching GraphQL data from within a component
Summary
Exercises
Further reading
Part 3 – Interactivity
Chapter 14: Building a Logo Interpreter
Technical requirements
Studying the Spec Logo user interface
Undoing and redoing user actions in Redux
Building the reducer
Building buttons
Saving to local storage via Redux middleware
Building middleware
Changing keyboard focus
Writing the reducer
Focusing the prompt
Requesting focus in other components
Summary
Further reading
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
Chapter 16: Working with WebSockets
Technical requirements
Designing a WebSocket interaction
The sharing workflow
The new UI elements
Splitting apart the saga
Test-driving a WebSocket connection
Streaming events with redux-saga
Updating the app
Summary
Exercises
Further reading
Part 4 – Behavior-Driven Development with Cucumber
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
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
Adding a dialog box
Updating sagas to a reset or replay state
Avoiding timeouts in test code
Adding HTML classes to mark animation status
Updating step definitions to use waitForSelector
Summary
Exercise
Chapter 19: 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
System tests and end-to-end 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 reading
Index
Other Books You May Enjoy