Previous Next

Practical Front-End Testing Strategies and Best Practices for Developers (Hsin-Hao Tang) (z-library.sk, 1lib.sk, z-lib.sk)

Author: Hsin-Hao Tang

Web

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.

📄 File Format: PDF
💾 File Size: 4.6 MB
15
Views
0
Downloads
0.00
Total Donations

📄 Text Preview (First 20 pages)

ℹ️

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1
Practical Front-End Testing Strategies and Best Practices for Developers — Hsin-Hao Tang
📄 Page 2
Practical Front-End Testing Strategies and Best Practices for Developers Hsin-Hao Tang
📄 Page 3
Practical Front-End Testing: Strategies and Best Practices for Developers ISBN-13 (pbk): 979-8-8688-1450-1 ISBN-13 (electronic): 979-8-8688-1451-8 https://doi.org/10.1007/979-8-8688-1451-8 Copyright © 2025 by Hsin-Hao Tang This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Anandadeep Roy Development Editor: James Markham Editorial Assistant: Jessica Vakili Cover designed by eStudioCalamar Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@ springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a Delaware LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail booktranslations@springernature.com; for reprint, paperback, or audio rights, please e-mail bookpermissions@springernature.com. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub. For more detailed information, please visit https://www.apress. com/gp/services/source-code. If disposing of this product, please recycle the paper Hsin-Hao Tang Taipei, Taiwan
📄 Page 4
To all developers committed to building robust, reliable, and high-quality web applications. May this book be a valuable guide in mastering front-end testing strategies and best practices, empowering you to write code with confidence and create exceptional user experiences.
📄 Page 5
v Table of Contents 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
📄 Page 6
vi Are These Testing Techniques Suitable for UI Development? ������������������������18 Notes �������������������������������������������������������������������������������������������������������������20 Naming Conventions �������������������������������������������������������������������������������������������22 Given-When-Then ������������������������������������������������������������������������������������������23 it should ���������������������������������������������������������������������������������������������������������24 3 A 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 Table of ConTenTs
📄 Page 7
vii Summary �������������������������������������������������������������������������������������������������������80 Notes �������������������������������������������������������������������������������������������������������������81 Shallow Rendering and Full Rendering ���������������������������������������������������������������82 Shallow Rendering ����������������������������������������������������������������������������������������83 Full Rendering �����������������������������������������������������������������������������������������������89 Summary �������������������������������������������������������������������������������������������������������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 Table of ConTenTs
📄 Page 8
viii 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 Table of ConTenTs
📄 Page 9
ix 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 Table of ConTenTs
📄 Page 10
x 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 Table of ConTenTs
📄 Page 11
xi 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 Table of ConTenTs
📄 Page 12
xii 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 Table of ConTenTs
📄 Page 13
xiii Hsin-Hao Tang (Summer) is passionate about front-end development, with a strong focus on creating products that deliver excellent user experiences and high performance. She is also a skilled SEO expert. She is an active blogger and writer. Her technical books in Chinese have been very well received by developers. About the Author
📄 Page 14
xv Eric Lee is a Senior Software Engineer with nine years of experience focusing on front-end development and has worked in ecommerce and electric vehicle industries. Passionate about maintainable code and developer experience, Eric believes testing is not only a crucial step to ensure great user and developer experiences but also to ensure the success of your product. As a technical reviewer, he hopes this helps developers understand testing’s importance and use it to build confidence between releases. About the Technical Reviewer
📄 Page 15
xvii I would like to express my heartfelt gratitude to Alex Liu, Eddie Kao, Hunter Liu, Kent Chen, Leslie Liu, Sean Chou, and Yvonne Huang for their invaluable support and contributions. Your insights, encouragement, and expertise have played a crucial role in the creation of this book. Thank you! Acknowledgments
📄 Page 16
xix Introduction Why I Wrote This Book 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 so 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 shares the practical experience I’ve accumulated in front-end testing, with the hope of inspiring and helping others. Whom This Book Is For If you • Want to dive deep into the types and implementation of front-end testing • Are looking to build flexible, maintainable test code • Wish to write test code efficiently • Face challenges when writing tests and are seeking solutions
📄 Page 17
xx this book will provide you with • Detailed explanations, supported by visuals and code examples, to help you learn, practice, and apply various front-end tests, while seeing the effectiveness of writing tests in real-world applications • Clear principles and viewpoints to guide you in evaluating testing strategies and costs, so you can make the best choices • Tips on effectively using AI tools to generate test code and boost productivity • A clear and thorough explanation of various challenges through easy-to-understand examples, helping you tackle testing obstacles with ease How This Book Is Structured The book is divided into eight chapters: • Getting Started with Testing: A deep dive into the fundamental concepts, techniques, and various types of front-end web testing • Unit Testing: In-depth exploration of how to validate logic at the smallest scope, emphasizing the importance of component testing, and a comparison of popular testing frameworks to ensure foundational tasks are done correctly • Integration Testing: Verifying specific features from the user’s perspective, with guidance on how to simulate real-world scenarios and use snapshots to improve the stability of your codebase InTroduCTIon
📄 Page 18
xxi • End-to-End Testing: Testing the entire workflow, focusing on simulating real user behavior to achieve comprehensive coverage • Visual Testing: Ensuring visual accuracy, detailing how to precisely compare UI elements across different browsers and viewports to accelerate the UI testing process • What to Do After Writing Tests: When and How to Run Them: Discussing different testing methods and timings, such as pre-commit hooks, manual triggers, pre- and post-merge tests, and continuous integration, as well as how to deduce usage case coverage from code coverage • Frequently Asked Questions: Practical solutions to common challenges, helping developers overcome the hurdles of testing • Leveraging AI for Writing Tests: How to leverage AI tools to enhance the efficiency of writing tests and increase productivity You can read the chapters in sequence or choose individual sections based on your needs. Code examples from this book can be found at the following links: • Chapters 1, 2, 4, 5, 7: https://bit.ly/49wKbrC • Chapter 3: https://bit.ly/3SZw2xL • Chapter 5: https://bit.ly/3MB2xxn InTroduCTIon
📄 Page 19
xxii Conventions Used in This Book // ... indicates that part of the code has been omitted. This is a key concept. Important concepts will be highlighted in bold. Example file paths will be noted above the code blocks. // Example file path src/sayHi.js const sayHi = () => console.log('Hi!'); About Me I’m Summer, an engineer, speaker, and writer, and the author of the technical blog Summer (https://www.cythilya.tw/) and the book Speed Up Your App with Web Vitals. My expertise includes SEO, front-end performance, and testing. InTroduCTIon
📄 Page 20
xxiii Forewords Foreword by Joey Chen Common Issues and Decision Points in Testing Practice In today’s software industry, everyone agrees on the value of automated testing, but it’s easier said than done. Many teams understand the concept but struggle with implementation. Even after becoming familiar with testing frameworks and writing some automated tests, teams often encounter decision-making challenges such as • Should tests simulate reality or use mock data? • Should tests verify implementation details or focus on external behaviors? • For front-end testing, should rendering be included? Should tests focus on shallow rendering or full rendering? • When should snapshot testing be used, and when is visual testing more appropriate? What are the use cases and limitations of each? • Should visual tests cover specific component combinations or entire web pages? • How much test coverage is enough? • How should naming conventions be defined and aligned with the team? What should the rationale be?
The above is a preview of the first 20 pages. Register to read the complete e-book.

💝 Support Author

0.00
Total Amount (¥)
0
Donation Count

Login to support the author

Login Now

Recommended for You

Loading recommended books...
Failed to load, please try again later
Back to List