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
15
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
94
Cypress vs. Playwright
silvenon
0
120
Studying Strapi: an open source head headless CMS
silvenon
0
23
CSS Specificity
silvenon
0
20
Make your JavaScript projects more accessible to newcomers
silvenon
0
47
React Hooks
silvenon
0
57
PostCSS
silvenon
0
30
CSS Custom Properties
silvenon
0
25
Writing Codemods with jscodeshift
silvenon
0
18
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
PHPはいつから死んでいるかの調査
chiroruxx
2
420
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
470
ゆるい個人開発のススメ
kuroppe1819
10
1k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
新宿ダンジョンを可視化してみた
satoshi7190
3
390
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Fragment Composition of GraphQL
quramy
13
1.4k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Netty Chicago Java User Group 2024-04-17
sullis
0
200
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
200
GitHub Copilotのススメ
marcy731
1
220
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
306
41k
Rails Girls Zürich Keynote
gr2m
91
13k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Product Roadmaps are Hard
iamctodd
45
9.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
The Cult of Friendly URLs
andyhume
74
5.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
Building Adaptive Systems
keathley
32
1.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