Practical Front-End Testing Strategies and Best Practices for Developers (Hsin-Hao Tang)（Z-Library）

Practical Front-End Testing Strategies and Best Practices for Developers — Hsin-Hao Tang

Practical Front-End Testing Strategies and Best Practices for Developers Hsin-Hao Tang

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

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.

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

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

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

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

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

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

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

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?