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
330
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
190
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
130
CodeMash 2020: Practical Functional Programming
jfairbank
1
310
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
330
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
170
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
110
All Things Open 2018: Practical Functional Programming
jfairbank
2
250
Connect.Tech 2018: Effective React Testing
jfairbank
1
140
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
810
Other Decks in Programming
See All in Programming
楽しく向き合う例外対応
okutsu
0
540
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
540
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
240
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
Conform を推す - Advocating for Conform
mizoguchicoji
3
700
sappoRo.R #12 初心者セッション
kosugitti
0
270
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Software Architecture
hschwentner
6
2.1k
Featured
See All Featured
KATA
mclloyd
29
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
A designer walks into a library…
pauljervisheath
205
24k
A Philosophy of Restraint
colly
203
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Cult of Friendly URLs
andyhume
78
6.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
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