Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Painless UI Testing with Jest

Andi N. Dirgantara
April 19, 2017
Programming
1
130

Painless UI Testing with Jest

This slides was presented on f8meetupmalang2017.splashthat.com by Yoan Pratama Putra from KodeFox.

Andi N. Dirgantara

April 19, 2017
Tweet

More Decks by Andi N. Dirgantara

See All by Andi N. Dirgantara
Building Scalable and Flexible API by Leveraging GraphQL and BigTable
hellowin
0
77
How Traveloka Handle Data Pipeline for Big Things?
hellowin
4
620
Data Lake Implementation in Traveloka
hellowin
2
310
How Big Data Platform Handle Big Things
hellowin
1
140
How Big Data Works in Sale Stock
hellowin
4
490
Interactive Animations with React Native
hellowin
0
150
Loopback Framework for Developing REST API with Node.js
hellowin
1
150
Facebook Developer Circle: Malang - Initial Meet Up
hellowin
0
110

Other Decks in Programming

See All in Programming
Being an ethical software engineer
xgouchet
PRO
0
200
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
Agentic Applications with Symfony
el_stoffel
2
270
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
160
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
0
110
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6k
List とは何か？ / PHPerKaigi 2025
meihei3
0
670
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
180
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
1.3k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.5k
AHC045_解説
shun_pi
0
460
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.8k

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
We Have a Design System, Now What?
morganepeng
52
7.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Speed Design
sergeychernyshev
29
880
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k

Transcript

  1. PAINLESS UI TESTING WITH JEST YOAN PRATAMA PUTRA

  2. TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING

  3. WHY TESTING?

  4. PAINLESS UI TESTING WITH JEST - KODEFOX ▸ To find

    bugs ▸ To find defects ▸ To ensure what we create does not break ▸ To ensure what we create does what it is supposed to do

  5. HOW TO DO TESTING?

  6. None

  7. PAINLESS UI TESTING WITH JEST - KODEFOX ▸ Fast ▸

    Easy Setup ▸ Instant Feedback ▸ Snapshot Testing ▸ From Facebook

  8. PAINLESS UI TESTING WITH JEST - KODEFOX ▸ Watch mode

    ▸ Mock modules and functions ▸ Mock react native components ▸ Mock react native platform OS FEATURES
  9. None
  10. None

  11. WHAT ABOUT UI COMPONENTS?

  12. SNAPSHOT TESTING

  13. None

  14. expect(component).toMatchSnapshot() get the output of the function save it into

    a .snap file has saved snapshot? compare snapshots

  15. SNAPSHOT TESTING PASS FAIL CHANGED BUG

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None

  23. WHAT WILL HAPPEN?

  24. None
  25. None

  26. SNAPSHOT TESTING PASS FAIL CHANGED BUG

  27. WHAT WILL HAPPEN?

  28. None

  29. SNAPSHOT TESTING PASS FAIL CHANGED BUG

  30. PAINLESS UI TESTING WITH JEST - KODEFOX BENEFITS OF SNAPSHOT

    TESTING ▸ Automated process ▸ Adapt to changes ▸ Easy to maintain

  31. Thank you! @oshimayoan oshimayoan/testing-react-demo