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
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Create a website using Spatial Web
akkeylab
0
300
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
340
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
920
VS Code Update for GitHub Copilot
74th
1
320
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
340
GraphRAGの仕組みまるわかり
tosuri13
7
480
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
110
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
110
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
524
40k
Building Applications with DynamoDB
mza
95
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What's in a price? How to price your products and services
michaelherold
246
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Scaling GitHub
holman
459
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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