jest-matcher-vue-test-utils

 jest-matcher-vue-test-utils

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

8358fe546d1b082b163f18a02eec145d?s=128

Kengo Hamasaki

April 24, 2019
Tweet

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
  4. None
  5. None
  6. https://medium.com/haiiro-io

  7. RubyKaigi 2019 ➤ https://rubykaigi.org/2019 ➤ Apr 18-20 at Fukuoka ➤

    Organizer/Staff/Helper since 2010
  8. None
  9. None
  10. None
  11. None
  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
  13. None
  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

  25. None
  26. ASSERT VISIBILITY

  27. None
  28. ASSERT VUEX ACTION/MUTATION CALL

  29. None
  30. PROP VALIDATION

  31. None
  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