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
jest-matcher-vue-test-utils
Search
Kengo Hamasaki
April 24, 2019
Programming
1
1.2k
jest-matcher-vue-test-utils
10mins talk (LT) for Vue.js v-tokyo Meetup #9
https://vuejs-meetup.connpass.com/event/124393/
Kengo Hamasaki
April 24, 2019
Tweet
Share
More Decks by Kengo Hamasaki
See All by Kengo Hamasaki
Running JavaScript within Ruby
hmsk
5
1k
ecnight-webpay
hmsk
3
1.6k
Other Decks in Programming
See All in Programming
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
220
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
170
Use Perl as Better Shell Script
karupanerura
0
690
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
590
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
290
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
660
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
300
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
C++20 射影変換
faithandbrave
0
480
XSLTで作るBrainfuck処理系
makki_d
0
200
FormFlow - Build Stunning Multistep Forms
yceruto
1
170
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
0
120
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Gamification - CAS2011
davidbonilla
81
5.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Bash Introduction
62gerente
614
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Writing Fast Ruby
sferik
628
61k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Producing Creativity
orderedlist
PRO
346
40k
We Have a Design System, Now What?
morganepeng
52
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
“MATCHER”
ME ➤ Kengo Hamasaki @hmsk ➤ Live in San Francisco,
CA ➤ Senior Software Engineer @ Indiegogo
VUE AND ME ➤ Frontend technology replacement at Indiegogo ➤
AngularJS 1.4 + TS -> Vue 2.6 + TS ➤ Vue Fes Japan 2018 CFP *Rejected* ➤ “How we choose and use Vue at Indiegogo” ➤ indiegogo.com ͷϑϩϯτΤϯυͷϑϨʔϜϫʔΫͱͯ͠৽ͨʹVue.jsΛબ͠·ͨ͠ɻAngular, Elm, React ͕ଞͷީิͱͯ͠ฒͿதͰɺͦͷબʹࢸΔ·Ͱͷҙࢥܾఆɺ୯७ʹ୲ऀͷझੈͷྲྀߦΓ͚ͩͰ ͳ͘ɺͦͷ࣌Ͱͷ։ൃ৫ͱͯ͠ͷҙɺߏ͢Δ։ൃऀୡͷεΩϧηοτʹ߹ΘͤͨධՁϓϩηε͕ ͋Γ·ͨ͠ɻҙࢥܾఆޙͷಋೖʹ͋ͨͬͯɺͦͷϓϩηε͔Βݟ͖͑ͯͨҙ͕৭ೱ͘ݱΕ͍ͯ·͢ɻ͜ ͷൃදɺ͜ͷධՁϓϩηεΛઃܭ͠ͳ͕Βɺ࣮ߦ͢ΔνʔϜͷҰһͰ͋ΓɺͦͷޙͷϓϩμΫγϣϯͷ ಋೖ͔Β։ൃΛओಋͨ͠ΤϯδχΞ͔Βհ͠·͢ɻ ➤ nuxt-community team ➤ nuxt-community/typescript-template ➤ A couple of modules on npm
None
None
https://medium.com/haiiro-io
RubyKaigi 2019 ➤ https://rubykaigi.org/2019 ➤ Apr 18-20 at Fukuoka ➤
Organizer/Staff/Helper since 2010
None
None
None
None
KAIGI SIGNAGE 2018- ➤ Nuxt 2.4.5 (nuxt-ts) ➤ Vuetify ➤
Firebase ➤ Realtime Database ➤ Authentication (GitHub) ➤ Netlify ➤ Static Generation ➤ Replaced Ember.js app ➤ Rails -> knockout -> Ember -> Vue
None
“MATCHER”
UNIT-TESTING FOR VUE ➤ Component ➤ Renderings from prop/data/ computed
➤ Interactions on template ➤ Events ➤ Vuex Store ➤ state/mutation/getter/ action
vue-test-utils ➤ vue/vue-test-utils ➤ Jest, Mocha, Karma or AVA…? ➤
“wrapper” just has everything
ASSERT EMITTED EVENT
ASSERT VISIBILITY
ASSERT VUEX ACTION/MUTATION CALL
PROP VALIDATION
RSpec ➤ Awesome(?) syntax ➤ Structured test examples ➤ context/describe/it/
shared examples ➤ Human friendly default matchers ➤ Extendable ➤ Custom matcher ➤ Test helpers ➤ http://www.betterspecs.org/
RSPEC
jest-matcher-vue-test-utils ➤ https://github.com/hmsk/ jest-matcher-vue-test-utils ➤ Custom matchers for Jest +
vue-test-utils ➤ Visibility on template ➤ Event emissions ➤ Vuex action/mutation ➤ Prop validations
ASSERT EMITTED EVENT
None
ASSERT VISIBILITY
None
ASSERT VUEX ACTION/MUTATION CALL
None
PROP VALIDATION
None
jest-matcher-vue-test-utils ➤ Nobody uses though ➤ Missing any fatal thing?
➤ TODO: ➤ Support vue-router ➤ i.e.) “toRouteTo” / “toHaveRoutedTo” ➤ Support mocha ➤ Better failing messages ➤ Better doc with vuepress?
“ npx i -D jest-matcher-vue-test-utils https://github.com/hmsk/jest-matcher-vue-test-utils