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
Rethinking Testing for React Applications
Search
Tommy Graves
March 20, 2019
Programming
0
38
Rethinking Testing for React Applications
Tommy Graves
March 20, 2019
Tweet
Share
More Decks by Tommy Graves
See All by Tommy Graves
Building a Production-Ready React Native App
tagraves
1
140
Fiber or Glimmer?
tagraves
0
21
Learning to Learn From Disagreement
tagraves
0
93
Other Decks in Programming
See All in Programming
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
140
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
960
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
400
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
970
Elm 0.19.0 Changes
bkuhlmann
0
490
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
490
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Milestoner
bkuhlmann
1
410
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
VS Code をプロダクトにどう取り込むか
onomax
1
630
Featured
See All Featured
Happy Clients
brianwarren
92
6.4k
YesSQL, Process and Tooling at Scale
rocio
165
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
A designer walks into a library…
pauljervisheath
201
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Writing Fast Ruby
sferik
622
60k
Producing Creativity
orderedlist
PRO
338
39k
Transcript
Rethinking Testing for React Applications
Tommy Graves Lead Software Engineer, New Channels !2 Twitter: @TAGraves
Email:
[email protected]
• High level discussion of what testing is for •
Three antipatterns that tests can fall into • The big reveal: a testing pattern that avoids those antipatterns !3 A quick overview
• To prevent defects in new code • To ensure
changes don't break existing functionality • To document the intention of the authors of a section of code • To drive the implementation of code? !4 Why do we test?
!5 Testing is about confidence!
What leads to confidence? !6
What leads to confidence? !7
Antipattern #1: Testing implementation details instead of behavior !8
Can the tests fail, but the code work? !9
The hooks rule !10
Antipattern #2: Testing the code instead of the application !11
Can the tests pass, but the code not work? !12
The machine- generated rule !13
Antipattern #3: Testing in isolation (for isolation's sake) !14
Do your tests care about how things really work? !15
!16 The testing pyramid Unit Tests: • Fast • Deterministic
• Easy to write • Easy to diagnose • Isolated confidence Integration Tests: • Slow • Flaky • Hard to write • Hard to diagnose • Overall confidence
!17 Mocks are trade-offs Mocks make tests: • Faster •
More deterministic • Easier to write • Easier to diagnose • Less confidence-giving
!18 Testing is about confidence!
!19 Rethinking Integration Integration tests can be • Fast •
Deterministic • Easy to write
The TDD rule !20
!21 • Testing implementation details instead of behavior • Testing
the code instead of the application • Testing in isolation (for isolation's sake) The three antipatterns
!22 React Testing Library
What leads to confidence? !23
Testing from the user's perspective !24
!25 Test-Driven UI Development
!26
Confidential – for internal use only !27
Thank you!
[email protected]