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
30
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
130
Cypress vs. Playwright
silvenon
0
150
Studying Strapi: an open source head headless CMS
silvenon
0
35
CSS Specificity
silvenon
0
28
Make your JavaScript projects more accessible to newcomers
silvenon
0
72
React Hooks
silvenon
0
71
PostCSS
silvenon
0
42
CSS Custom Properties
silvenon
0
39
Writing Codemods with jscodeshift
silvenon
0
27
Other Decks in Programming
See All in Programming
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Hack Claude Code with Claude Code
choplin
4
2.1k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.2k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Optimizing for Happiness
mojombo
379
70k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Balancing Empowerment & Direction
lara
1
430
We Have a Design System, Now What?
morganepeng
53
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Thoughts on Productivity
jonyablonski
69
4.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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