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
実践AIチャットボットUI実装入門
syumai
7
2.5k
CSC305 Lecture 03
javiergs
PRO
0
240
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.3k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.5k
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
620
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
160
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
410
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
610
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Automating Front-end Workflow
addyosmani
1371
200k
Scaling GitHub
holman
463
140k
Being A Developer After 40
akosma
91
590k
Embracing the Ebb and Flow
colly
88
4.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Raft: Consensus for Rubyists
vanstee
139
7.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
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