jest-matcher-vue-test-utils

10mins talk (LT) for Vue.js v-tokyo Meetup #9
https://vuejs-meetup.connpass.com/event/124393/

Transcript

1. “MATCHER”
2. ME ➤ Kengo Hamasaki @hmsk ➤ Live in San Francisco, CA ➤ Senior Software Engineer @ Indiegogo
3. 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
6. https://medium.com/haiiro-io
7. RubyKaigi 2019 ➤ https://rubykaigi.org/2019 ➤ Apr 18-20 at Fukuoka ➤ Organizer/Staff/Helper since 2010
12. 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
14. “MATCHER”
15. UNIT-TESTING FOR VUE ➤ Component ➤ Renderings from prop/data/ computed ➤ Interactions on template ➤ Events ➤ Vuex Store ➤ state/mutation/getter/ action
16. vue-test-utils ➤ vue/vue-test-utils ➤ Jest, Mocha, Karma or AVA…? ➤ “wrapper” just has everything
17. ASSERT EMITTED EVENT
18. ASSERT VISIBILITY
19. ASSERT VUEX ACTION/MUTATION CALL
20. PROP VALIDATION
21. RSpec ➤ Awesome(?) syntax ➤ Structured test examples ➤ context/describe/it/ shared examples ➤ Human friendly default matchers ➤ Extendable ➤ Custom matcher ➤ Test helpers ➤ http://www.betterspecs.org/
22. RSPEC
23. 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
24. ASSERT EMITTED EVENT
26. ASSERT VISIBILITY
28. ASSERT VUEX ACTION/MUTATION CALL
30. PROP VALIDATION
32. 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?
33. “ npx i -D jest-matcher-vue-test-utils https://github.com/hmsk/jest-matcher-vue-test-utils