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
77
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
310
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
490
Interactive Animations with React Native
Avatar for Andi N. Dirgantara hellowin
0
150
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
Vibe Coding の話をしよう
Avatar for schroneko schroneko
14
3.7k
On-the-fly Suggestions of Rewriting Method Deprecations
Avatar for Masato Ohba ohbarye
3
5.2k
スモールスタートで始めるためのLambda×モノリス（Lambdalith）
Avatar for アキキー akihisaikeda
2
400
状態と共に暮らす：ステートフルへの挑戦
Avatar for ypresto ypresto
3
1.2k
The New Developer Workflow: How AI Transforms Ideas into Code
Avatar for Daniel Sogl danielsogl
0
120
2025年のz-index設計を考える
Avatar for TAK tak_dcxi
2
760
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
1
290
AIコーディングの理想と現実
Avatar for Tomohisa Takaoka tomohisa
36
39k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
Avatar for Kazuya Kurihara ymbigo
13
6.1k
VibeCoding時代のエンジニアリング
Avatar for どすこい daisuketakeda
0
130
Improve my own Ruby
Avatar for monochrome sisshiki1969
1
110
七輪ライブラリー: Claude AI で作る Next.js アプリ
Avatar for suneo3476 suneo3476
1
190

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
19
1.2k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
840
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
420
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
105
19k

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