Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JazzCon 2018: Effective React Testing
Search
Jeremy Fairbank
March 22, 2018
Programming
1
370
JazzCon 2018: Effective React Testing
Jeremy Fairbank
March 22, 2018
Tweet
Share
More Decks by Jeremy Fairbank
See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
jfairbank
1
210
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
160
CodeMash 2020: Practical Functional Programming
jfairbank
1
330
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
360
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
180
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
130
All Things Open 2018: Practical Functional Programming
jfairbank
2
270
Connect.Tech 2018: Effective React Testing
jfairbank
1
170
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
860
Other Decks in Programming
See All in Programming
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
XP, Testing and ninja testing ZOZ5
m_seki
3
600
Software Architecture
hschwentner
6
2.3k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
430
Cursorハンズオン実践!
eltociear
2
910
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
220
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
970
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
800
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
280
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Code Reviewing Like a Champion
maltzj
525
40k
Site-Speed That Sticks
csswizardry
11
890
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Side Projects
sachag
455
43k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making Projects Easy
brettharned
119
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Transcript
Effective React Testing Jeremy Fairbank @elpapapollo
@testdouble helps improves how the world build software. testdouble.com/agency
In beta now! bit.ly/programming-elm
My shiny new React application…
…without tests.
None
None
API Design
Refactoring
?
redux-thunk +
Components Test expected output.
Reducer Test state changes as expected.
Actions Test actions through reducer tests. Test thunks for coordination.
E2E Integration Unit Snapshot $$$ $
E2E Integration Unit Snapshot $$$ $
E2E Integration Unit Snapshot $$$ $
E2E Integration Unit Snapshot $$$ $
E2E Integration Unit Snapshot $$$ $
None
Jest facebook.github.io/jest
1. Automatic with create-react-app 2. Or add yourself: yarn add
jest npm install --save jest
Enzyme JavaScript testing utilities for React. github.com/airbnb/enzyme yarn add enzyme
enzyme-adapter-react-16
TDD with Components <NameTag name="Jeremy" employer="Test Double" /> expect "Hello.
I'm Jeremy from Test Double."
DEMO
Unit Tests Recap
Unit Tests Recap
Unit Tests Recap Easy to write
Unit Tests Recap Easy to write Fast
Unit Tests Recap Easy to write Fast Isolated design feedback
Unit Tests Recap Easy to write Fast Isolated design feedback
Unit Tests Recap Easy to write Fast Isolated design feedback
Tedious to test all components
Unit Tests Recap Easy to write Fast Isolated design feedback
Tedious to test all components Coupled to implementation
Unit Tests Recap Easy to write Fast Isolated design feedback
Tedious to test all components Coupled to implementation No interaction with other components
Snapshot Tests Recap
Snapshot Tests Recap
Snapshot Tests Recap Easily test component tree
Snapshot Tests Recap Easily test component tree Fast
Snapshot Tests Recap Easily test component tree Fast Fill in
test gaps quickly
Snapshot Tests Recap Easily test component tree Fast Fill in
test gaps quickly Regression safety
Snapshot Tests Recap Easily test component tree Fast Fill in
test gaps quickly Regression safety
Snapshot Tests Recap Easily test component tree Fast Fill in
test gaps quickly Regression safety No design feedback
Snapshot Tests Recap Easily test component tree Fast Fill in
test gaps quickly Regression safety No design feedback Break from markup changes
Snapshot Tests Recap Easily test component tree Fast Fill in
test gaps quickly Regression safety No design feedback Break from markup changes Prone to human error
Integration Tests Recap
Integration Tests Recap ⚙⚙
Integration Tests Recap ⚙ Test component’s interaction with child components
⚙
Integration Tests Recap ⚙ Test component’s interaction with child components
⚙
Integration Tests Recap ⚙ Test component’s interaction with child components
Coupled to child component implementation ⚙
Integration Tests Recap ⚙ Test component’s interaction with child components
Coupled to child component implementation Redundant test coverage ⚙
Integration Tests Recap ⚙ Test component’s interaction with child components
Coupled to child component implementation Redundant test coverage Harder to debug ⚙
E2E Integration Unit Snapshot $$$ $
E2E Integration Unit Snapshot $$$ $
Reducer Action New State State Testing Redux
DEMO
Unit Tests “Redux”
Unit Tests “Redux”
Unit Tests “Redux” Easier to write Fast Isolated design feedback
Unit Tests “Redux” Easier to write Fast Isolated design feedback
Unit Tests “Redux” Easier to write Fast Isolated design feedback
Thunk tests coupled to implementation
Unit Tests “Redux” Easier to write Fast Isolated design feedback
Thunk tests coupled to implementation No interaction with the rest of the application
Integration Tests “Redux”
Integration Tests “Redux” ⚙⚙
Integration Tests “Redux” ⚙ Test reducer, actions, and API library
together ⚙
Integration Tests “Redux” ⚙ Test reducer, actions, and API library
together Test entire application ⚙
Integration Tests “Redux” ⚙ Test reducer, actions, and API library
together Test entire application ⚙
Integration Tests “Redux” ⚙ Test reducer, actions, and API library
together Test entire application More setup ⚙
Integration Tests “Redux” ⚙ Test reducer, actions, and API library
together Test entire application More setup Harder to debug ⚙
Integration Tests “Redux” ⚙ Test reducer, actions, and API library
together Test entire application More setup Harder to debug Doesn’t test user interaction ⚙
End-to-end Testing
Test entire application in browser End-to-end Testing
Test entire application in browser Simulate user interactions End-to-end Testing
Test entire application in browser Simulate user interactions Interact with
a real API (with test data) End-to-end Testing
Test entire application in browser Simulate user interactions Interact with
a real API (with test data) Focus on happy path End-to-end Testing
yarn add cypress
DEMO
E2E Tests Recap
E2E Tests Recap
E2E Tests Recap Test all pieces working together in user
scenarios
E2E Tests Recap Test all pieces working together in user
scenarios Cypress makes E2E pleasant and easier to debug
E2E Tests Recap Test all pieces working together in user
scenarios Cypress makes E2E pleasant and easier to debug
E2E Tests Recap Test all pieces working together in user
scenarios Cypress makes E2E pleasant and easier to debug Slow
E2E Tests Recap Test all pieces working together in user
scenarios Cypress makes E2E pleasant and easier to debug Slow Break from markup changes or pepper source code with identifiers
E2E Tests Recap Test all pieces working together in user
scenarios Cypress makes E2E pleasant and easier to debug Slow Break from markup changes or pepper source code with identifiers Still harder to debug than unit tests
E2E Integration Unit Snapshot $$$ $
Snapshot E2E Integration Unit $$$ $
Write tests!
Thank you! Jeremy Fairbank @elpapapollo Slides: bit.ly/react-testing-jazzcon Code: bit.ly/react-testing-jazzcon-code