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
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
10
3.6k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
840
SpringBoot3.4の構造化ログ #kanjava
irof
2
990
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
110
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
120
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
Software Architecture
hschwentner
6
2.1k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Fireside Chat
paigeccino
34
3.2k
BBQ
matthewcrist
87
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building an army of robots
kneath
303
45k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Documentation Writing (for coders)
carmenintech
67
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
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