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
Fast JSX: Don't clone props object #28768
yossydev
1
160
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.1k
Implementing Design Systems in Swift
seyfoyun
1
440
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
Site Reliability Engineering for GMO
pyama86
8
1.1k
What We Can Learn From OSS
inouehi
0
430
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
350
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
Sheets API使ってみた
toshi0383
2
160
PHPはいつから死んでいるかの調査
chiroruxx
2
410
Git Rebase
bkuhlmann
11
1.6k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Building Your Own Lightsaber
phodgson
100
5.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
The Invisible Side of Design
smashingmag
294
49k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Making Projects Easy
brettharned
109
5.5k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Adopting Sorbet at Scale
ufuk
69
8.6k
KATA
mclloyd
16
12k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
19
1.6k
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