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
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
PipeCDのプラグイン化で目指すところ
warashi
1
300
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
AIともっと楽するE2Eテスト
myohei
8
3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What's in a price? How to price your products and services
michaelherold
246
12k
Faster Mobile Websites
deanohume
308
31k
It's Worth the Effort
3n
185
28k
Raft: Consensus for Rubyists
vanstee
140
7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
KATA
mclloyd
30
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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