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
Maintainable Integration Testing in React
Search
Matija Marohnić
February 22, 2018
Programming
0
21
Maintainable Integration Testing in React
Matija Marohnić
February 22, 2018
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
120
Cypress vs. Playwright
silvenon
0
140
Studying Strapi: an open source head headless CMS
silvenon
0
27
CSS Specificity
silvenon
0
21
Make your JavaScript projects more accessible to newcomers
silvenon
0
62
React Hooks
silvenon
0
62
PostCSS
silvenon
0
34
CSS Custom Properties
silvenon
0
32
Writing Codemods with jscodeshift
silvenon
0
19
Other Decks in Programming
See All in Programming
CSC305 Lecture 13
javiergs
PRO
0
110
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
710
Folding Cheat Sheet #8
philipschwarz
PRO
0
140
Workflow automationによるインシデント原因調査の自動化
showwin
1
110
Serverless renderování Webových komponent
rarous
PRO
0
140
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2.4k
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
4
430
CSC509 Lecture 04
javiergs
PRO
0
170
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
860
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
3.2k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.3k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
650
Faster Mobile Websites
deanohume
304
30k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
77
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Navigating Team Friction
lara
183
14k
Adopting Sorbet at Scale
ufuk
73
9k
Transcript
None
Matija Marohnić @silvenon
Maintainable Integration Testing in React
Integration testing Unit testing End-to-end testing
Unit testing Are isolated parts of this feature working?
Integration testing Is this feature supposed to work?
End-to-end testing Does this feature actually work in a real
browser?
$$$ ¢ E2E Integration Unit Testing pyramid
•flaky/brittle •“too much of a hassle” •some features are hard
to test Case against frontend testing
•flaky → pass and fail with the same code •brittle
→ easily broken Flaky/brittle
•an afterthought, something to “deal with later” •not considered an
essential part of development “Too much of a hassle”
•e.g. some advanced APIs •async doesn’t help, it’s often about
timing •developers skip challenging tests, but never return Some features are hard to test
None
•integration tests focus on features •unit tests focus on implementation
details Why “mostly integration”?
How do you feel after writing a test?
None
–Me “A test is useless if you’re equally likely to
make a mistake in the implementation and the test itself.”
•usually developers strive towards 100% •important in libraries and APIs
•not really in frontend application code Test coverage
“You should write tests”
Testing in React
•simulating events •traversing through the tree •mounting in the DOM
or shallow rendering React test utilities
Mounting
Shallow rendering
Shallow vs. mount Unit vs. integration
•a complete testing framework •built-in jsdom •powerful assertions •easy mocking
Jest
•Enzyme •built on top of React’s test utilities •useful high-level
API •Nock •imitates a server Companion tools
Example: DataGrid
None
•opening a DataGrid displays features of the currently selected layer
Testing features Do Don’t •opening a DataGrid makes a certain API request
None
•creating a filter causes features to reduce to an expected
set Testing features Do Don’t •creating a filter displays a chip component
What about the API?
Nock
Nock
•battle-testing some modules in a cheap way •a disposable crutch
during development So when to unit test?
None
If the whole thing works together, chances are that its
parts are working as well