Mastering React Test-Driven Development: Build simple and maintainable web apps with React, Redux, and GraphQL, 2nd Edition
- Length: 564 pages
- Edition: 2
- Language: English
- Publisher: Packt Publishing
- Publication Date: 2022-09-30
- ISBN-10: 1803247126
- ISBN-13: 9781803247120
- Sales Rank: #336597 (See Top 100 Books)
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.
Mastering React Test-Driven Development Second Edition Foreword Contributors About the author About the reviewer 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 Code snippet conventions JavaScript conventions Get in touch Share Your Thoughts 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 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 Why subscribe? Other Books You May Enjoy Packt is searching for authors like you
Donate to keep this site alive
How to download source code?
1. Go to: https://github.com/PacktPublishing
2. In the Find a repository… box, search the book title: Mastering React Test-Driven Development: Build simple and maintainable web apps with React, Redux, and GraphQL, 2nd Edition
, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.