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
1.1k
ecnight-webpay
hmsk
3
1.6k
Other Decks in Programming
See All in Programming
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
980
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
210
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
コーディングエージェント概観(2025/07)
itsuki_t88
0
430
階層化自動テストで開発に機動力を
ickx
1
430
Jakarta EE Meets AI
ivargrimstad
0
350
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
160
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
MCPで実現できる、Webサービス利用体験について
syumai
7
2.1k
効率的な開発手段として VRTを活用する
ishkawa
1
180
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.4k
Featured
See All Featured
Visualization
eitanlees
146
16k
Fireside Chat
paigeccino
37
3.5k
Facilitating Awesome Meetings
lara
54
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Balancing Empowerment & Direction
lara
1
500
For a Future-Friendly Web
brad_frost
179
9.8k
Building an army of robots
kneath
306
45k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
How to Ace a Technical Interview
jacobian
278
23k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Scaling GitHub
holman
461
140k
Site-Speed That Sticks
csswizardry
10
720
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