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

Painless UI Testing with Jest

Avatar for Andi N. Dirgantara Andi N. Dirgantara
April 19, 2017
Programming
1
140

Painless UI Testing with Jest

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

Avatar for Andi N. Dirgantara

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
Avatar for Andi N. Dirgantara hellowin
0
83
How Traveloka Handle Data Pipeline for Big Things?
Avatar for Andi N. Dirgantara hellowin
4
630
Data Lake Implementation in Traveloka
Avatar for Andi N. Dirgantara hellowin
2
340
How Big Data Platform Handle Big Things
Avatar for Andi N. Dirgantara hellowin
1
160
How Big Data Works in Sale Stock
Avatar for Andi N. Dirgantara hellowin
4
500
Interactive Animations with React Native
Avatar for Andi N. Dirgantara hellowin
0
180
Loopback Framework for Developing REST API with Node.js
Avatar for Andi N. Dirgantara hellowin
1
170
Facebook Developer Circle: Malang - Initial Meet Up
Avatar for Andi N. Dirgantara hellowin
0
120

Other Decks in Programming

See All in Programming
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
230
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
1
180
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.4k
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
970
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
210
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.8k
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k

Featured

See All Featured
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
210
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
110

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