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

Painless UI Testing With Jest

Avatar for Yoan Pratama Putra Yoan Pratama Putra
April 19, 2017
Programming
0
150

Painless UI Testing With Jest

This is slides from my talk at F8 Meetup Malang on 19 April 2017

Avatar for Yoan Pratama Putra

Yoan Pratama Putra

April 19, 2017
Tweet

More Decks by Yoan Pratama Putra

See All by Yoan Pratama Putra
Testing React Using Jest
Avatar for Yoan Pratama Putra oshimayoan
1
120

Other Decks in Programming

See All in Programming
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
370
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
1
460
What's new in Spring Modulith?
Avatar for Oliver Drotbohm olivergierke
1
160
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
25
6.2k
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
160
Foundation Modelsを実装日本語学習アプリを作ってみた！
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
120
アメ車でサンノゼを走ってきたよ！
Avatar for Shigure Shimotori s_shimotori
0
230
CSC509 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
1
300
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
Avatar for shibayu36 shibayu36
3
5.1k
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
180
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
140

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
910
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k

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