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
280
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
160
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
120
CodeMash 2020: Practical Functional Programming
jfairbank
1
290
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
300
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
150
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
78
All Things Open 2018: Practical Functional Programming
jfairbank
2
240
Connect.Tech 2018: Effective React Testing
jfairbank
1
130
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
760
Other Decks in Programming
See All in Programming
Implementing Design Systems in Swift
seyfoyun
2
530
FoodGram
iseruuuuu
0
230
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
550
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
200
GoでParserを書く
karupanerura
1
200
一文字エイリアスのすすめ
fujimura
0
190
TypeScriptのパフォーマンス改善
yajihum
14
5k
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
Runtime Objects in Rust
mitsuhiko
0
220
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
Criando a Woovi em uma semana
daniloab
0
120
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Ruby is Unlike a Banana
tanoku
96
10k
Docker and Python
trallard
35
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
4 Signs Your Business is Dying
shpigford
176
21k
Product Roadmaps are Hard
iamctodd
45
9.8k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
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