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
130

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
79
How Traveloka Handle Data Pipeline for Big Things?
Avatar for Andi N. Dirgantara hellowin
4
620
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
140
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
160
Loopback Framework for Developing REST API with Node.js
Avatar for Andi N. Dirgantara hellowin
1
150
Facebook Developer Circle: Malang - Initial Meet Up
Avatar for Andi N. Dirgantara hellowin
0
110

Other Decks in Programming

See All in Programming
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
140
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
160
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
930
The state patternの実践 個人開発で培ったpractice集
Avatar for miyanokomiya miyanokomiya
0
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
Avatar for NakamuraTakumi nyatinte
7
970
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
Avatar for clshinji clshinji
1
180
ECS初心者の仲間 – TUIツール「e1s」の紹介
Avatar for Xing Yahao keidarcy
0
110
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
240
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
14
8.1k
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
Avatar for Mirrativ mirrativ
2
270
AI時代に学習する意味はあるのか？
Avatar for tomoya-kamaji tomoyakamaji
0
100
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
Avatar for po3rin po3rin
8
990

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
284
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k

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