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
330
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
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
170
PC-6001でPSG曲を鳴らすまでを全部NetBSD上の Makefile に押し込んでみた / osc2025hiroshima
Avatar for Izumi Tsutsui tsutsui
0
200
チームをチームにするEM
Avatar for hitode909 hitode909
0
410
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
140
GoLab2025 Recap
Avatar for kuro kuro_kurorrr
0
790
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
2
470
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
320
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
230
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
4.5k
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
5
1.4k
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
190
生成AI時代を勝ち抜くエンジニア組織マネジメント
Avatar for coconala_engineer coconala_engineer
0
34k

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
0
100
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
0
320
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
990
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
0
380
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
200
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
39
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
570
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
33

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