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

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

 In the fast-paced and ever-evolving field of front-end development, one of the biggest challenges is maintaining high-quality code while producing work rapidly. This is why testing has become crucial. Deciding on the right testing approach and how to write and execute tests is a key issue every developer must consider. Code without tests is difficult to guarantee in terms of quality, and the solution lies in developing a solid testing strategy. This book provides practical guidance in front-end testing that will help you master a variety of techniques and understand how to apply them in real-world applications.
 This book dives deep into the types and implementation of front-end testing to teach you best practices for building flexible, maintainable test code. By guiding you through various strategies, the book will help you produce test code efficiently. Its pragmatic approach promises to be useful if you encounter challenges when writing tests and are searching for solutions.
 The book provides detailed explanations supported by visuals and code examples, helping you learn, practice, and apply various front-end tests. It presents clear principles and approaches to guide you in evaluating testing strategies and costs, so you can make the best choices. Additionally, the book contains thorough explanations of various challenges through easy-to-understand examples, enabling you to tackle testing obstacles with ease.
It begins with the fundamentals of testing, discussing basics like types of tests and naming conventions. The subsequent chapters cover how to write and use unit testing, integration testing, end-to-end testing, and visual testing. Additionally, the book includes a chapter on how to perform these tests. The final chapters focus on frequently asked questions about front-end testing, serving as a quick reference for developers. The book concludes with material on how to use AI in testing to boost productivity.

You Will Learn:

• How to write and employ a wide variety of tests, including unit testing, integration testing, end-to-end testing, and visual testing
• Effectively using AI tools to generate test code and enhance productivity
• Make informed decisions in testing, based on both cost and effectiveness

Who Is This Book For:

 Front-end developers, full-stack developers, software testers, and QA automation developers.