Test-Driven Development with React: Apply Test-Driven Development in Your Applications

Description

Learn to use accelerated test-driven development (TDD) to build a React application from scratch. This book explains how your React components will be integrated, and how to refactor code to make it more concise and flexible. With TDD you can develop a robust test suite to catch bugs, and develop modular, flexible code. Applying your understanding of how HTML, CSS, and JavaScript work in the browser you'll build a web application called Bookish using TDD and mainstream React stack technologies such as React, React-router, and Redux.  Using higher code quality you'll be able to write executable documentation using Cucumber. This is just one of many essentials in maintaining a practical TDD workflow in your daily workload. Test-Driven Development with React highlights best practices and design patterns that will enable you to write more maintainable and reusable React components. What You'll Learn Manage your application’s state using Redux Employ professional techniques for backend servicesUse Cypress as an end-to-end testing frameworkUtilize React-testing-library for unit and integration tests Who This Book Is For Ideal for web application developers who wants to learn how to write high quality code using Test-Driven Development.  Table of Contents About the Author About the Technical Reviewer Foreword Foreword 2 Acknowledgments Introduction Chapter 1: A Very Brief History of Test-Driven Development Test-Driven Development Red-Green-Refactor Cycle A Closer Look at Red-Green-Refactor Types of TDD Acceptance Test-Driven Development Behavior-Driven Development Prerequisites of TDD Aware of Code Smell and Refactoring Test First or Test Last Techniques That Can Help Implement TDD Tasking Separation Principle – INVEST To-Do list with Post-it Summary Further Reading Chapter 2: Get Started with Jest Set Up the Environment Install Node.js Install and Config Jest Jest at First Glance Basic Concepts in Jest Jest API: Describe and It Organize Your Tests Maintainer Friendly Set Up and Tear Down Using ES6 Install and Config Babel Using Matchers in Jest Equality .not Method for Opposite Matching Matchers for Array and Object toContainEqual and toContain The Powerful Function Expect The Containing Family Functions Build Your Matchers Example: jsonpath Matcher Extend the Expect Function Mock and Stub jest.fn for Spying Mock Implementation Stub a Remote Service Call Summary Chapter 3: Test-Driven Development 101 Writing Tests Using Given-When-Then to Arrange a Test Triangulation Method Example: function addition The First Test for addition A Simple Implementation The Second Test Case to Make Our Implementation Less Specific The Final and Simple Implementation How to Implement Tasking with TDD An Expression Parser for Tracking Progress Spilt the Parser to Sub-tasks Applying TDD Step by Step The First Test – Parse and Calculate Mark d The Second Test – For Mark D The Combination of Notes d and D Refactoring – Extract Functions Keep Refactoring – Extract Functions to Files Summary Chapter 4: Project Setup Application Requirements Feature 1 – Booklist Feature 2 – Book Detail Feature 3 – Searching Feature 4 – Reviews Create the Project Using create-react-app Project File Structure Material-UI Library Font and Icons Using Typography as an Example Cypress Setting Up Cypress Writing Our First End-to-End Test Define a Shortcut Command Commit Code to Version Control Files to Ignore Summary Chapter 5: Implementing the Book List Acceptance Tests for Book List A List (of Books) Verify Book Name Refactoring – Extract Function Refactoring – Extract Component Talk to the Book Server Stub Server Set Up json-server Make Sure Stub Server Is Working Async Request in Application Setup and Teardown Extend Stub Book Service with Middleware beforeEach and afterEach Hook Adding a Loading Indicator Refactor First Adding More States Refactor: Extract Component Define a React Hook Use the useRemoteService Hook Unit Test with React-Testing-Library Test Loading State Test Error State Test Expected Data Summary Chapter 6: Implementing the Book Detail View Acceptance Tests Link to Detail Page Verify Book Title on Detail Page Front-End Routing BookDetailContainer Component Generalize useRemoteService Hook Simplify BookDetailContainer with the New Hook Unit Tests Refactor Extract Presentational Component MemoryRouter for Testing Book Detail Page Book Title Book Description File Structure Modularize Testing Data User Interface Refinement Using Grid System Making Styles for Components Handling default value A Failing Test with undefined One Last? Change Summary Chapter 7: Searching by Keyword Acceptance Test One Step Further What Have We Done? Moving Forward Summary Chapter 8: State Management A Typical UI Scenario A Brief of Redux Three Principles of Redux Decoupling Data and View View = f(state) Implementing State Management Environment Set Up Start from Action Async Actions The Failure Scenario Searching Action Refactor Reducer Integration Test for Redux Store Migrating the Application Test the Container Fetch Book Detail Summary Further Reading Chapter 9: Managing Book Reviews Business Requirements Start with an Empty List Rendering a Static List Use the Review Component Fulfill a Book Review Form End-to-End Test Action in Redux json-server Customization Refactoring Add More Fields Review Editing Save the Review – Action Integration Summary Chapter 10: Behavior-Driven Development Play with Cucumber Install and Config Cucumber Plugin Live Document with cucumber File Structure The First Feature Specification Define the Steps Interpret Sentences by Step Definition Book List Define Book List Scenario Use Data Table Interface Before and After Hooks Searching Step Definitions Reviews Page Test Report Configure cypress-cucumber-preprocessor Some More Use HTML Reporter Summary Appendix A: Design the State Data Shape of Your Application Error Handling Intercept the Errors The Data Shape redux-devtools-extension Appendix B: Background of Testing Strategies Test Pyramid Agile Testing Quadrants Index