Table Of ContentMastering
React Test-Driven Development
Second Edition
Build simple and maintainable web apps with React, Redux,
and GraphQL
Daniel Irvine
BIRMINGHAM—MUMBAI
Mastering React Test-Driven Development
Second Edition
Copyright © 2022 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, 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.
Group Product Manager: Pavan Ramchandani
Publishing Product Manager: Bhavya Rao
Senior Editor: Aamir Ahmed
Senior Content Development Editor: Feza Shaikh
Technical Editor: Saurabh Kadave
Copy Editor: Safis Editing
Project Coordinator: Manthan Patel
Proofreader: Safis Editing
Indexer: Manju Arasan
Production Designer: Aparna Bhagat
Marketing Coordinator: Anamika Singh and Marylou De Mello
First published: May 2019
Second edition: September 2022
Production reference: 2130922
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-80324-712-0
www.packt.com
To Nige, my first mentor, who taught me the importance of slowing down.
– Daniel Irvine
Foreword
For as long as test-driven development (TDD) has existed, there has been debate over whether
TDD is feasible for user interface work—even among its staunchest proponents. When people built
tools to prove that it’s possible, the debate shifted to whether TDD is as valuable for UIs, considering
that programmers can get rapid feedback by seeing and interacting with an interface. Even when
TDD’s value is evidenced by smaller, more consistent, single-responsibility units of UI code, some
would question whether the same could have been accomplished with less effort by simply following
established design patterns.
Is TDD worth your time? Will it result in fewer bugs in your code? Will it improve the design of your
system? Will it make future maintenance easier? Maybe.
In the fifteen-or-so years that I’ve been learning, practicing, and teaching test-driven development I
have oscillated back-and-forth. Sometimes I relentlessly pursue 100% code coverage, and other times I’ll
build worrisomely large applications with no automated tests at all. What I’ve found—and what might
surprise some readers—is that my code basically turns out the same whether I practice TDD or not:
a similar frequency of bugs, the same idiosyncratic design, and no more or less a burden to maintain.
(At this point, you’d be right to start wondering what this ambivalent foreword is doing in a book
designed to teach you TDD.)
The reason that TDD itself doesn’t impact my code very much is because my years of practice have
utterly and irrevocably changed me.
I write small single-purpose units, because I’ve felt the sheer exhaustion of writing tests of sprawling
unfocused objects.
I avoid mixing levels of abstraction, because I’ve been hopelessly lost in mazes of mock objects that
combine testing logic with specifying interactions.
I segregate code coupled to frameworks from feature logic, because I’ve contorted too many tests to
fit dependencies that weren’t meant to be tested.
Rigorously practicing TDD transformed my career. Not because it’s the One True Way to program,
but because it forces you to ceaselessly ask “how would we test that?” TDD is incredibly challenging
at first, but patterns gradually emerge that result in easy-to-test code. And code that’s easy to test, is
easy to write. And use. And maintain.
Wherever you are in your journey, I hope this book brings you closer to a similar destination.
Justin Searls
VP of Engineering at Test Double
testdouble.com
Contributors
About the author
Daniel Irvine is a software consultant based in London. He works with a variety of languages including
C#, Clojure, JavaScript, and Ruby. He’s a mentor and coach for junior developers and runs TDD and
XP workshops and courses. When he’s not working, he spends time cooking and practicing yoga.
He co-founded the Queer Code London meetup and is an active member of the European software
craft community.
I would like to thank the technical reviewer of this edition of the book,
Emmanuel Demey, for spotting the weakest points of the text and helping
me improve them. I continue to be grateful for my friend and technical
reviewer from the first edition, Raimo Radczewski, who is also the author
of the expect-redux package that is used in this book.
The team at Packt has been supportive and professional throughout, giving me
exactly what I needed to finish the book. For this second edition, I am thankful
for the detailed and thoughtful editing that Feza Shaikh has undertaken,
helping to deliver the book ahead of schedule. My technical editor, Saurabh
Kadave, spotted plenty of mistakes that would have otherwise gone unnoticed.
Aamir Ahmed, Bhavya Rao, and Manthan Patel were also instrumental in the
production of the second edition.
From the first edition, I am thankful for the hard work of Keagan Carneiro,
Sachin Sunilkumar from Packt, and also my friends and colleagues
Charlotte Payne, Dan Pelensky, Isidro López, Makis Otman, Sam Szreter,
Zach Shaw, Brendan Murphy, and Lucy Monie Hall.
Finally, thank you to all the readers of the first edition who took the time
to send me comments and feedback, all of which were invaluable.
This second edition is better because of your help.
About the reviewer
Emmanuel Demey works with the JavaScript ecosystem every day, and he spends his time sharing his
knowledge with anybody. His first goal at work is to help the people that he works with. He speaks at
French conferences (Devfest Nantes, Devfest Toulouse, Sunny Tech, Devoxx France, and others) about
anything related to the web platform: JavaScript frameworks (Angular, React.js, Vue.js), accessibility,
Nest.js, and so on. He has been a trainer for 10 years at Worldline and Zenika (two French consulting
companies). He is also a co-leader of the Google Developer of Lille group and a co-organizer of the
Devfest Lille conference.
Table of Contents
Preface xv
Part 1 – Exploring the TDD Workflow
1
First Steps with Test-Driven Development 3
Technical requirements 4 Triangulating to remove hardcoding 20
Creating a new React project from Backtracking on ourselves 22
scratch 4
Refactoring your work 25
Installing NPM 5
Sharing setup code between tests 25
Creating a new Jest project 5
Extracting methods 26
Bringing in React and Babel 7
Writing great tests 27
Displaying data with your first test 8
Red, green, refactor 28
Writing a failing test 8
Streamlining your testing process 29
Make it pass 16
Summary 30
Making use of the act test helper 18
Further reading 30
2
Rendering Lists and Detail Views 33
Technical requirements 34 Selecting data to view 43
Sketching a mock-up 34 Initial selection of data 43
Creating the new component 35 Adding events to a functional component 45
Specifying list item content 40 Manually testing our changes 49
Adding an entry point 49
Putting it all together with webpack 51
viii Table of Contents
Summary 54 Further reading 55
Exercises 54
3
Refactoring the Test Suite 57
Technical requirements 58 Extracting DOM helpers 70
Pulling out reusable rendering logic 58 Summary 73
Creating a Jest matcher using TDD 61 Exercises 73
Further reading 74
4
Test-Driving Data Input 75
Technical requirements 75 Duplicating tests for multiple form
Adding a form element 76 fields 94
Accepting text input 78 Nesting describe blocks 94
Generating parameterized tests 95
Submitting a form 84
Solving a batch of tests 98
Submitting without any changes 84
Modifying handleChange so that it works
Preventing the default submit action 87
with multiple fields 100
Submitting changed values 90
Testing it out 100
Summary 101
Exercises 101
5
Adding Complex Form Interactions 103
Technical requirements 103 Adding a header column 113
Choosing a value from a select box 104 Adding a header row 117
Providing select box options 105 Test-driving radio button groups 120
Preselecting a value 108 Hiding input controls 122
Constructing a calendar view 111 Selecting a radio button in a group 127
Adding the table 112
Table of Contents ix
Handling field changes through a component Extracting a test props object 140
hierarchy 129
Summary 144
Reducing effort when constructing
Exercises 145
components 136
Further reading 145
Extracting test data builders for time and
date functions 137
6
Exploring Test Doubles 147
Technical requirements 148 Stubbing fetch responses 167
What is a test double? 148 Upgrading spies to stubs 168
Learning to avoid fakes 149 Acting on the fetch response 168
Displaying errors to the user 174
Submitting forms using spies 149
Grouping stub scenarios in nested
Untangling AAA 150 describe contexts 177
Making a reusable spy function 152
Migrating to Jest’s built-in test
Using a matcher to simplify spy expectations 154
double support 178
Spying on the fetch API 157
Using Jest to spy and stub 178
Replacing global functions with spies 158 Migrating the test suite to use Jest’s test
Test-driving fetch argument values 159 double support 179
Reworking existing tests with the side-by-side Extracting fetch test functionality 182
implementation 162
Summary 184
Improving spy expectations with helper
Exercises 184
functions 166
Further reading 184
7
Testing useEffect and Mocking Components 185
Technical requirements 185 Fetching data on mount with
Mocking child components 186 useEffect 191
How to mock components, and why? 186 Understanding the useEffect hook 191
Testing the initial component props 188 Adding the renderAndWait helper 193
Adding the useEffect hook 194
Testing the useEffect dependency list 198
