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

Vue.js 單元測試 -Jest

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for CypressKuo CypressKuo
April 28, 2017
Technology
200
0

Vue.js 單元測試 -Jest

Vue.js 單元測試 with Jest

Avatar for CypressKuo

CypressKuo

April 28, 2017

More Decks by CypressKuo

See All by CypressKuo
Deep-copying.pdf
Avatar for CypressKuo cypresskuo
0
41
CSS_for_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
46
談談_Code_review.pdf
Avatar for CypressKuo cypresskuo
0
52
REST_vs_GraphQL_今夜はご注文はどっち.pdf
Avatar for CypressKuo cypresskuo
0
27
CSS_重構.pdf
Avatar for CypressKuo cypresskuo
0
30
跟上_JS_的腳步-ES2020.pdf
Avatar for CypressKuo cypresskuo
0
35
Core_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
62
這個時代人人都知道的敏捷開發.pdf
Avatar for CypressKuo cypresskuo
0
65
Webassembly.pdf
Avatar for CypressKuo cypresskuo
0
19

Other Decks in Technology

See All in Technology
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
260
【CEDEC2026】専門性の高いデフォルメチームが挑んだ人材育成戦略 〜Cygames Academiaの企画から実施まで〜
Avatar for Cygames, Inc. cygames
PRO
0
600
カートの信頼性を担保するWireMockを使ったe2eテスト
Avatar for ykagano ykagano
0
260
制約理論（ToC）入門　2026版
Avatar for Recruit recruitengineers
PRO
8
2.2k
【CEDEC2026】Creative Approaches to Localizing the Dialects and Unique Speech of Umamusume: Pretty Derby Characters in English
Avatar for Cygames, Inc. cygames
PRO
3
16k
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
290
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
7
19k
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
230
SmartHR Engineering Team Deck
Avatar for SmartHR Recruit smarthr
1
2.1k
トヨタ⽣産⽅式(TPS)⼊⾨
Avatar for Recruit recruitengineers
PRO
3
780
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
8.2k
20260608_Codexの可能性_ノンプログラマー向け_大城追記
Avatar for NobuakiOshiro doradora09
PRO
0
800

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
270
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
300
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.3k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
430
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
380
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
490
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.3k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k

Transcript

  1. Vue.js 單元測試 -Jest 2017/04/28 @前端組例會 cypresskuo

  2. Jest Painless JavaScript Testing - Easy Setup - Instant Feedback

    - Snapshot Testing - Zero configuration testing platform - Facebook 開源專案 2

  3. Easy Setup Zero configuration testing platform 3

  4. Instant Feedback --watch --watchAll 4

  5. Snapshot Testing 將 React trees 或是其他可序列化的 UI 截取下來， 防止無意間修改到組件的某個部份。 -

    server side render 5

  6. 6

  7. 其他功能 DOM Testing (需要其他元件 TestUtil) Mock Function 覆蓋率報告 --coverage http://stackoverflow.com/questions/26618243/how-do-i-read-an-istanbul-coverage-report

    7

  8. 參考資料 http://facebook.github.io/jest/ https://vuejs.org/v2/guide/unit-testing.html http://laichuanfeng.com/work/jest-snapshot-and-dom-testing-in-react/ https://hackernoon.com/jest-for-all-episode-1-vue-js-d616bccbe186 8

  9. 感謝聆聽 9