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
75
How Traveloka Handle Data Pipeline for Big Things?
hellowin
4
610
Data Lake Implementation in Traveloka
hellowin
2
310
How Big Data Platform Handle Big Things
hellowin
1
130
How Big Data Works in Sale Stock
hellowin
4
490
Interactive Animations with React Native
hellowin
0
140
Loopback Framework for Developing REST API with Node.js
hellowin
1
140
Facebook Developer Circle: Malang - Initial Meet Up
hellowin
0
110

Other Decks in Programming

See All in Programming
これが俺の”自分戦略” プロセスを楽しんでいこう！ - Developers CAREER Boost 2024
niftycorp
PRO
0
190
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
150
テストコード書いてみませんか？
onopon
2
170
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
870
バグを見つけた？それAppleに直してもらおう！
uetyo
0
180
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
340
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
350
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
3
330
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
300

Featured

See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
GitHub's CSS Performance
jonrohan
1031
460k
Docker and Python
trallard
42
3.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Adopting Sorbet at Scale
ufuk
73
9.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Code Reviewing Like a Champion
maltzj
521
39k

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