Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Take a snapshot - ngvikings
Search
Bo Vandersteene
May 28, 2019
Programming
0
180
Take a snapshot - ngvikings
Bo Vandersteene
May 28, 2019
Tweet
Share
More Decks by Bo Vandersteene
See All by Bo Vandersteene
Nest the backend for your Angular Application #ijs2019
bovandersteene
0
110
AgentConf - Where is my error gone?
bovandersteene
0
370
Nest the backend for your Angular Application @AngularConnect
bovandersteene
2
1.2k
Other Decks in Programming
See All in Programming
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
470
GoのGenericsによるslice操作との付き合い方
syumai
3
720
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
GraphRAGの仕組みまるわかり
tosuri13
8
520
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Select API from Kotlin Coroutine
jmatsu
1
220
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
630
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Docker and Python
trallard
44
3.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
Adopting Sorbet at Scale
ufuk
77
9.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
It's Worth the Effort
3n
185
28k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Gamification - CAS2011
davidbonilla
81
5.3k
KATA
mclloyd
30
14k
Raft: Consensus for Rubyists
vanstee
140
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
Take a snapshot Bo Vandersteene @reibo_bo
@reibo_bo @reibo_bo @bo.vandersteene Software Engineer & Coach
Snapshot
None
Snapshot a component
None
None
None
Snapshot a block of code
None
None
Test case Render UI component Test against snapshot
How we do it with Jasmine
None
• A lot of lines • Forget code to test
• Hard to define all cases • Nice feedback • ...
Should we skip
E2E <> Unit
Unit test - Small easily - Function - Class -
Complex algorithm
E2E test - Take screenshots - Entire application - Flows
- Cypress, protractor, ...
Unit tests !
Testing is HARD
None
Why Jest Fast Sandboxed Zero Config Snapshots Error reporting
Zero config
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W Each app/lib tsconfig.spec.json
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W Each app/lib angular.json
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
http://bit.ly/2M28O9W
Snapshot testing
None
None
None
None
• Creates the snapshot if it doesn’t exist
• Creates the snapshot if it doesn’t exist
• Creates the snapshot if it doesn’t exist
None
None
• Creates the snapshot if it doesn’t exist • Compares
expectation to stored snapshot • Performs a diff
• Creates the snapshot if it doesn’t exist • Compares
expected to stored snapshot • Performs a diff • Easily update snapshot on refactor
• Creates the snapshot if it doesn’t exist • Compares
expected to stored snapshot • Performs a diff • Easily update snapshot on refactor
Commit snapshot
Not only components!
None
None
None
RxJs
None
None
None
None
Globals
Globals afterAll afterEach beforeAll beforeEach describe.each describe.only describe.only.each describe.skip describe.skip.each
test.each test.only test.only.each test.skip test.skip.each test.todo describe test
None
None
None
None
Mock
None
None
None
None
None
None
None
None
None
Tips & Tricks
Make your tests your documentation
Test logic
Use beforEach Use afterEach
Treat snapshots as code
Tests should be deterministic
Units NOT methods
ng test -u
Commit snapshots
ci-tools ng test
Love testing
Thank You @reibo_bo @bo.vandersteene https://github.com/reibo/jest-example