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.1k
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
ecnight-webpay
hmsk
3
1.5k
Other Decks in Programming
See All in Programming
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
Elm 0.19.0 Changes
bkuhlmann
0
490
新宿ダンジョンを可視化してみた
satoshi7190
2
240
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
Anthropic Cookbook のおすすめレシピ
schroneko
7
900
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
120
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
120
Apache Hive 4 on Treasure Data
ryukobayashi
0
120
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
840
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
25
5.8k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Atom: Resistance is Futile
akmur
259
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
What the flash - Photography Introduction
edds
64
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Building Applications with DynamoDB
mza
88
5.6k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Thoughts on Productivity
jonyablonski
58
3.8k
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