Simplify Testing with React Testing Library

246 Pages·2021·4.317 MB·English

by  Scottie Crump

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