Mastering React Test-Driven Development.
Build simple and maintainable web apps with React, Redux, and GraphQL
1st Edition
Published on 30. September 2022
564 pages
978-1-80323-055-9 (ISBN)
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.
All prices
More details
Other editions
Previous edition
Daniel Irvine Irvine
Mastering React Test-Driven Development
Build rock-solid, well-tested web apps with React, Redux and GraphQL
E-Book
05/2019
1st Edition
Packt Publishing Limited
€36.99
Available for download
Content
- 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
