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

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