Simplify Testing with React Testing Library PDF
Preview Simplify Testing with React Testing Library
Simplify Testing with React Testing Library Create maintainable tests using RTL that do not break with changes Scottie Crump BIRMINGHAM—MUMBAI Simplify Testing with React Testing Library Copyright © 2021 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Publishing Product Manager: Aaron Tanna Senior Editor: Hayden Edwards Content Development Editor: Abhishek Jadhav Technical Editor: Deepesh Patel Copy Editor: Safis Editing Project Coordinator: Manthan Patel Proofreader: Safis Editing Indexer: Rekha Nair Production Designer: Prashant Ghare First published: April 2021 Production reference: 1160421 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-80056-445-9 www.packt.com To my mother, Judy, and father, Randall, for always being there and encouraging me to be the best at whatever my heart desires. To my wife, Victoria, for being my loving partner and being patient enough to allow me to work countless hours on this project while holding back the urge to throw my laptop out of the window. To my son, Liam, my greatest motivator, who gave me the extra energy to stay up late at night to write another sentence and line of code. – Scottie Crump Contributors About the author Scottie Crump is a senior test engineer with over four years' experience as a consultant working with clients from a variety of sectors, including automotive, retail, telecommunications, and healthcare, among others. Scottie has also worked with numerous students looking to break into the software industry at Coding Bootcamp settings. His background in quality and software engineering and education enables him to be a crucial cog in any client's project. Scottie has helped bring industry best practices and data-driven insights to support key business objectives. About the reviewer Alexander Krolick is an open source maintainer of React Testing Library and related projects. Table of Contents Preface 1 Exploring React Testing Library Technical requirements 2 Advantages of using jest-dom with Jest 11 Introducing the DOM Testing Testing implementation details 16 Library 2 Problems with implementation detail- What is the DOM Testing Library? 2 focused tests 16 Guiding principles 5 Implementation detail-focused test example 18 Executing test cases with Jest 6 How to move away from Running tests with Jest 6 implementation detail testing 21 Enhancing Jest assertions with Summary 22 jest-dom 10 Questions 22 Adding jest-dom to a project 11 2 Working with React Testing Library Technical requirements 24 Rendering elements 26 Adding React Testing Library to Selecting elements in the component existing projects 24 DOM output 26 Asserting expected behavior 29 Manual installation 24 Automatic installation with create- Testing presentational react-app 24 components 30 Structuring tests with React Creating snapshot tests 30 Testing Library 25 Testing expected properties 34 ii Table of Contents Using the debug method 37 Summary 39 Debugging the entire component DOM 37 Questions 40 Debugging specific component elements 38 3 Testing Complex Components with React Testing Library Technical requirements 42 Creating mock API data with MSW 56 Testing user events 42 Testing the DrinkSearch component 58 Using MSW in development 62 Simulating user actions with fireEvent 42 Simulating user actions with user-event 46 Implementing test-driven Testing components that call event development 65 handlers in isolation 50 Building the Vote component using TDD 66 Testing components that Building a registration form using TDD 70 interact with APIs 53 Summary 77 Requesting API data with fetch 53 Questions 77 4 Integration Testing and Third-Party Libraries in Your Application Technical requirements 80 Testing the ProductDetail component in isolation 92 Testing integrated components 80 Testing context errors using error Using integration testing with the Vote boundaries 93 component 80 Using integration testing to test view Planning test scenarios better suited product details 95 for isolated testing 84 Testing components that use Testing components that use Redux 97 the Context API 86 Creating a custom render method for Testing a context consuming Retail testing Redux consuming components 99 component 86 Using the test Redux Provider in tests 101 Testing the Cart component in isolation 90 Testing the Product component in Testing components that use isolation 91 GraphQL 103 Table of Contents iii Testing Components that use Adding a test ID to test a Material-UI 108 CustomerTable component 112 Adding an ARIA label to test a Vote Summary 115 component 108 Questions 116 5 Refactoring Legacy Applications with React Testing Library Technical requirements 118 Refactoring tests written with Using tests to catch regressions ReactTestUtils 133 when updating dependencies 118 Refactoring tests to comply with common testing best Creating the regression test suite 121 practices 135 Upgrading the Material UI dependencies 126 Summary 141 Questions 141 Refactoring tests written with Enzyme 129 6 Implementing Additional Tools and Plugins for Testing Technical requirements 144 Selecting queries using the Testing Playground website 161 Implementing best practices with Testing Library ESLint Selecting queries using the Testing Playground Chrome extension 165 plugins 144 Installing and configuring eslint-plugin- Increasing our testing testing-library 147 productivity with Wallaby.js 168 Installing and configuring eslint-plugin- Installing and configuring Wallaby.js 168 jest-dom 152 Writing tests with Interactive Test Testing accessibility with jest- Output 170 axe 156 Summary 172 Selecting the best queries with Questions 173 Testing Playground 161
The list of books you might like
