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
31
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
140
Cypress vs. Playwright
silvenon
0
160
Studying Strapi: an open source head headless CMS
silvenon
0
38
CSS Specificity
silvenon
0
30
Make your JavaScript projects more accessible to newcomers
silvenon
0
74
React Hooks
silvenon
0
72
PostCSS
silvenon
0
44
CSS Custom Properties
silvenon
0
40
Writing Codemods with jscodeshift
silvenon
0
29
Other Decks in Programming
See All in Programming
What's new in Spring Modulith?
olivergierke
1
150
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
320
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
170
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
A better future with KSS
kneath
239
18k
Side Projects
sachag
455
43k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Building an army of robots
kneath
306
46k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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