Test-Driven Development with React and TypeScript: Building Maintainable React Applications

✍ Scribed by Juntao Qiu

• Publisher: Apress
• Year: 2023
• Tongue: English
• Leaves: 277
• Edition: 2
• Category: Library

✦ Synopsis

Apply test-driven principles to create scalable and maintainable React applications. This book covers a wide range of topics, including setting up a testing environment and utilizing popular testing frameworks like Cypress, Jest, and the React Testing Library. It also delves into valuable refactoring techniques, as well as enhancing code maintainability and readability. What sets this comprehensive guide apart is its end-to-end project simulation, showcasing how TDD can be employed to build a complete application called "Bookish."

Test-Driven Development with React and TypeScript elevates its code examples by leveraging TypeScript, the predominant language in modern frontend development, offering you a deeper understanding of how TDD principles can be applied to React projects. Furthermore, all code examples have been carefully revised and updated for this edition, incorporating reader feedback and reflecting current industry standards.

After completing this book, you have the knowledge and skills necessary to develop high quality and scalable React applications.

What You Will Learn

• Master essential refactoring techniques to enhance code quality
• Employ modern practices for writing maintainable React code, including testing and product implementation
• Gain practical experience applying test-driven development (TDD) principles to real-world projects
• Craft high quality, scalable, and maintainable React applications using TDD principles and techniques

Who This Book Is For

Web application developers who wants to learn how to write high quality code using test-driven development.

✦ Table of Contents

Table of Contents
About the Author
About the Technical Reviewers
Acknowledgments
Foreword 1
Foreword 2
Introduction
Chapter 1: A Brief History of Test-Driven Development
What Is Test-Driven Development?
The Red-Green-Refactor Cycle
A Closer Look at Red-Green-Refactor
Types of TDD
Implementing Acceptance Test–Driven Development
Behavior-Driven Development
Prerequisites of TDD
Be Aware of Code Smell and Refactoring
Test First or Test Last
Other Techniques That Can Help Implement TDD
Tasking
Maintaining a Simple Checklist
Summary
Further Reading
Chapter 2: Get Started with Jest
Set Up the Environment
Install and Configure 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 Matchers in Jest
Basic Usages
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
Mocking and Stubbing
jest.fn for Spying
Mock Implementation
Stub a Remote Service Call
Summary
Chapter 3: Refactoring Essentials: The Basics You  Need to Know
The Ten Most Common Refactorings
Let’s Talk the Problem – Code Smells
Long Files
Big Props List
Mixing Computation with Views
Overuse of Mocks
Not Following Established Principles
The Problem – ROT13
The Initial Implementation
The Top Ten Refactorings
Step 1: Slide Statements
Step 2: Extract Constant
Step 3: Extract Function
Step 4: Rename Parameter
Step 5: Rename Variable
Step 6: Extract Function
Step 7: Replace if-else with ?
Step 8: Extract Function
Step 9: Extract Parameter
Step 10: Extract Constant
Step 11: Slide Statements
Step 12: Move Fields
Step 13: Function to Arrow Function
Step 14: Simplify Logic
Summary
Chapter 4: Test-Driven Development Essentials
Writing Tests
Using Given-When-Then to Arrange a Test
Triangulation Method
Example: Function addition
The First Test for addition
A Quick and Dirty Implementation
The Second Test Case to Make Our Implementation Less Specific
The Final and Simple Implementation
How to Do Tasking with TDD
An Expression Parser for Tracking Progress
Split the Parser to Subtasks
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 5: Project Setup
Application Requirements
Feature 1 – Book List
Feature 2 – Book Detail
Feature 3 – Searching
Feature 4 – Book Reviews
Create the Project
Using create-react-app
Project File Structure
Material UI Library
Font and Icons
Using Typography As an Example
Install Cypress
Set Up Cypress
Our First End-to-End Test
Define a Shortcut Command
Commit Code to Version Control
Files to Ignore
Summary
Chapter 6: Implement the Book List
Acceptance Tests for Book List
A List (of Books)
Verify Book Name
Refactoring – Extract Function
Refactoring – Extract Component
Talk to the Backend Server
Stub Server
Set Up json-server
Make Sure the 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
Unit Tests of the Bookish Application
Unit Test with the React Testing Library
Test Loading State
Summary
Chapter 7: Implementing the Book Detail View
Acceptance Tests
Link to Detail Page
Verify Book Title on Detail Page
Frontend Routing
BookDetailContainer Component
Extract useBook Hook
Simplify BookDetailContainer with the New Hook
Unit Tests
Refactoring
Extract Presentational Component BookDetail
MemoryRouter for Testing
Book Detail Page
Book Title
Book Description
File Structure
Modularize
Testing Data
User Interface Refinement
Using Grid System
Handling Default Value
A Failing Test with undefined
One Last Change?
Summary
Chapter 8: Searching by Keyword
Acceptance Test
One Step Further
What Have We Done?
Moving Forward – The Test Code Is As Important
Summary
Chapter 9: Introduction to State Management
State Management
A Typical Scenario of Building UI
Pub-Sub Pattern
A Brief of Redux
Three Principles of Redux
Decoupling Data and View
The Formula: view = f(state)
Implementing State Management
Environment Setup
Define a Slice
Fetching Data from Remote
Define the Store
Migrate the Application
Book List Container
Refine the SearchBox
Test Individual Reducers
Book Details Slice
Do You Need a State Management Library?
Summary
Chapter 10: Book Reviews
Business Requirements
Start with an Empty List
Rendering a Static List
Use the Review Component in BookDetail
Fulfill a Book Review Form
End-to-End Test
Define a Review Slice
Adjust the Stub Server for Book Reviews
Refactoring
Add More Fields
Review Editing
Save a Review – Action and Reducer
Integration All Together
Summary
Chapter 11: 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
Searching
Step Definitions
Review Page
Summary
Appendix A: Background of Testing Strategies
Different Layers of Tests
Test Pyramid
Agile Testing Quadrants
Summary
Appendix B: A Short Introduction to TypeScript
The Language
Primitive Types
Custom Types
Interface
Class
Type Alias
Summary
Index