Practical Front-End Testing: Strategies and Best Practices for Developers

About the Author ...........................................................................................xiiiAbout the Technical Reviewer ..........................................................................xvAcknowledgments ..........................................................................................xviiIntroduction ..................................................................................................xixForewords .....................................................................................................xxiiiChapter 1: Getting Started with Testing ....1What Is Front-End Web Testing? ....2Why Write Tests? ....2How to Start Writing Tests? ....3Types of Front-End Testing ....4Unit Testing ....5Integration Testing ....8End-to-End Testing ....10Visual Testing ....11I Only Have One Hour, Which Tests Should I Write? ....12Summary ....13Notes ....15Testing Techniques ....16What Are the Testing Techniques? ....16How Are These Testing Techniques Applied in Development? ....17Are These Testing Techniques Suitable for UI Development? ....18Notes ....20Naming Conventions ....22Given-When-Then ....23it should ....243A Pattern ....25Conclusion ....26Notes ....27Mock, Spy, and Double ....27Mock ....27Spy ....28Double ....30Notes ....31Chapter Review and Summary ....32Chapter 2: Unit Testing ....35Unit Testing ....36Environment Setup, Installation, and Tool Comparison ....39Jest ....39Cypress ....48Notes ....53Minimal Scope Validation Logic ....54Breaking Down Overly Complex Code ....56Isolating Dependencies ....58Conclusion ....60Notes ....60How to Write Tests for Components? A React Example ....60Testing Implementation vs. Testing Behavior ....61Splitting Logic and Presentation ....69Summary ....80Notes ....81Shallow Rendering and Full Rendering ....82Shallow Rendering ....83Full Rendering ....94Notes ....95Chapter Review and Summary ....96Chapter 3: Integration Testing ....99Integration Testing ....99Notes ....108Testing Features from the User’s Perspective andMaximizing Realism ....108Testing Features from the User’s Perspective ....108Maximizing Realism ....110Notes ....112Mocking Components, API Responses, and Third-Party Libraries ....113How to Mock Components? ....114How to Mock API Responses? ....116How to Mock Third-Party Libraries? ....122Why Aim for Realism? Is Mocking Not Good Enough? ....125Can Testing Be Done Without Using Mock Data? ....129Notes ....129Snapshots ....130Notes ....140How to Write Tests for State Management? A Redux Example ....141Notes ....148Chapter Review and Summary ....148Chapter 4: End-to-End Testing ....151End-to-End Testing ....151Notes ....154Environment Setup and Installation ....154Notes ....156Verifying User Flow ....159Memori ....160Conclusion ....167Notes ....169Chapter Review and Summary ....169Chapter 5: Visual Testing ....171Visual Testing ....171Mixtini ....172How Snapshot Comparison Works ....174Notes ....176Verifying Visual Accuracy ....177Component-Level Testing ....178Page-Level Testing ....189Workflow ....192Summary ....192Notes ....193Tool Comparison ....194Snapshot File Types and Structure ....195Reviewing Snapshots Based on Pull Requests or Branches ....197Merge Checks ....197Component-Level Testing ....198Page-Level Testing ....198Browser Support ....199Summary ....199Notes ....201Chapter Review and Summary ....201Chapter 6: What to Do After Writing Tests: When and How to Run Them ....205Pre-commands and Manual Test Invocation ....206Pre-commands ....206Manual Test Invocation ....207Summary ....209Notes ....209Run Tests Before Merging Code ....210pre-commit ....210pre-push ....211Running Tests During PR Submission ....213Summary ....214Notes ....214Running Tests Regularly in CI ....215Should Code Be Merged into the Main Branch When Tests Fail? ....216How to Reduce the Likelihood of Test Failures After Code Merges? ....217Notes ....217Inferring Use Case Coverage from Code Coverage ....218Conclusion ....223Chapter Review and Summary ....223Chapter 7: Frequently Asked Questions ....225What to Do When UI Updates Cause Test Failures? ....225The Element Selection Method Is Too Loose, Strict, or Lacks Clear Meaning ....226Tests with Too Many Implementation Details ....234Summary ....248Notes ....249How to Handle Duplicate Tests? ....249Notes ....253How to Test the Timer? ....254Notes ....258How to Mock Only Part of a Module? ....258How to Debug? What If an Element Can’t Be Found? How DoYou Trace the Data Flow? ....260What If the Element Can’t Be Found? ....263How Do You Trace the Data Flow? ....265Notes ....267How to Test Localization? ....267Notes ....271How to Use Setup and Teardown? What Are beforeEach,afterEach, beforeAll, and afterAll? ....272Repeated Setup ....272One-Time Setup ....275Summary ....276Notes ....276Should Tests Include Type Checking? ....277Option 1: Implement Type Checking Inside the addNumbers Function ....277Option 2: Use Tools for Type Checking ....278Notes ....279Why Do Some Test Cases Succeed Sometimes and Fail Other Times? ....280Resource Dependencies ....280Test Dependencies ....283Conclusion ....286Notes ....286How to Run Specific Tests? An Example Using Jest ....287Skipping Specific Test Blocks ....287Skipping Specific Test Cases ....288Notes ....292Chapter 8: Leveraging AI for Writing Tests ....293How to Effectively Use GitHub Copilot for Writing Tests ....293Simple Example ....294Implementing Unit Tests ....296Implementing Integration Tests ....297Implementing End-to-End Tests ....302Conclusion ....304Notes ....305How to Leverage Mermaid and ChatGPT for Writing Tests ....306Simple Example ....307Writing Unit Tests ....313Implementing Integration Test ....318Implementing End-to-End Test ....324Conclusion ....328Notes ....329Chapter 9: Summary ....331Types and Methods of Testing ....331Product Stage and Testing Ratio ....331Common Types of Testing ....331Testing Methods and Tools ....332Testing Strategies at Different Stages of Product Development ....332Leveraging AI to Improve Testing Efficiency ....333Conclusion ....333Index ....335