Testing Vue components with Jest and vue-test-utils

How to test Vue components effectively with Jest and vue-test-utils.

Transcript

1. Testing Vue components
   with Jest and vue-test-utils
   @ryohashimoto
   

   View Slide

2. ࠓճ͓࿩͢͠Δ͜ͱ
   • 2िؒ΄ͲલʹɺVue.jsΛϑϩϯτΤϯυͰ
   ࢖ͬͨRuby on RailsͷϓϩδΣΫτͰɺJest
   ͱvue-test-utilsΛಋೖɻ
   • ؆୯ʹVueίϯϙʔωϯτͷ୯ମςετ͕ॻ͚
   ΔΑ͏ʹͳͬͯɺΧόϨοδ΋औΕΔΑ͏ʹ
   ͳͬͨɻ
   

   View Slide

3. ͳͥɺVueίϯϙʔωϯτͷ

   ςετΛߦ͏͔ʁ
   

   View Slide

4. Why?
   • ֤ίϯϙʔωϯτ͕ࢦఆ͞Εͨঢ়ଶͰਖ਼͘͠
   ಈ͘͜ͱΛอূ͢ΔͨΊʢϢχοτςετʣ
   • खಈςετͷ৔߹ͷखؒʢϒϥ΢βͷૢ࡞ʣ
   Λল͖ɺCIͰ࣮ߦՄೳʹ͢ΔͨΊ
   • কདྷతͳVue.jsͷΞοϓάϨʔυʹඋ͑ΔͨΊ
   

   View Slide

5. Vue.jsΞϓϦέʔγϣϯͷ

   ߏ੒ཁૉ
   

   View Slide

6. Vueίϯϙʔωϯτ
   • HTMLςϯϓϨʔτ+Vue.jsίʔυ
   • ΧϓηϧԽ͞Εͨ࠶ར༻Մೳͳίʔυ
   • ୯ҰϑΝΠϧίϯϙʔωϯτ(.vue֦ுࢠ)Λ࢖
   ༻Ͱ͖Δ
   • ૊Έ߹ΘͤΔ͜ͱͰΞϓϦέʔγϣϯΛߏ੒
   

   View Slide

7. Vueίϯϙʔωϯτͷྫ
   
   {{ greeting }} World!
   
   <br/>module.exports = {<br/>data () {<br/>return {<br/>greeting: 'Hello'<br/>}<br/>}<br/>}<br/>
   JavaScript

   (ES6)
   HTML
   

   View Slide

8. Vuex ετΞ
   • ΞϓϦέʔγϣϯͷঢ়ଶʢεςʔτʣΛҰݩ
   อ࣋͢Δ
   • ঢ়ଶͷมԽ͸ϛϡʔςʔγϣϯͷίϛοτʹ
   Αͬͯߦ͏
   • ίϯϙʔωϯτຖʹঢ়ଶΛ࣋ͨͳͯ͘ࡁΉ

   (ύϥϝʔλͷड͚౉͕͠ෆཁʹͳΔ)
   

   View Slide

9. Vuex ετΞͷྫ
   const store = new Vuex.Store({
   state: {
   count: 0
   },
   mutations: {
   increment (state) {
   state.count++
   }
   }
   })
   εςʔτ

   ύϥϝʔλ
   
   ϛϡʔςʔγϣϯ

   ૢ࡞
   
   

   View Slide

10. Vueίϯϙʔωϯτͷςετ
    

    View Slide

11. લఏɿ୯ମςετͷ3-A
    • Arrange (४උ)

    ॳظԽ͠ɺσʔλΛ४උ͢Δ
    • Act (࣮ߦ)

    ςετର৅ͱͳΔॲཧΛ࣮ߦ͢Δ
    • Assert (ݕূ)

    ༧ଌ௨Γʹಈ࡞͢Δ͜ͱΛݕূ͢Δ
    

    View Slide

12. Vueίϯϙʔωϯτͷ3A (1)
    Vue component
    Vuex state HTML
    • Vueίϯϙʔωϯτʹ VuexεςʔτΛೖྗͱ
    ͯ͠༩͑Δ͜ͱͰɺHTMLΛग़ྗ͢Δ
    • Arrange: VuexεςʔτɺAct: Vueίϯϙʔω
    ϯτɺAssert: HTML
    

    View Slide

13. Vueίϯϙʔωϯτͷ3A (2)
    Vue component
    Vuex state HTML
    Event
    • ΠϕϯτΛ༩͑ͨ৔߹ʢΫϦοΫͳͲʣ
    • Arrange: Vuexεςʔτ, Act: Πϕϯτ / Vueί
    ϯϙʔωϯτ, Assert: HTML / Vuexεςʔτ
    

    View Slide

14. Vueίϯϙʔωϯτͷςετཁ݅
    • Vue ίϯϙʔωϯτ୯ମͰςετ͕Ͱ͖Δ
    • VuexετΞɺΠϕϯτͳͲΛਖ਼͘͠ѻ͑Δ
    • πʔϧͷಋೖ͕؆୯ͰɺΧόϨοδ΋औΕΔ
    • Jest ͱ vue-test-utilsͳΒશ͕ͯՄೳʂ
    

    View Slide

15. ςετͷπʔϧ

    (Jest / vue-test-utils)
    

    View Slide

16. Jest
    • JavaScriptͷςετϑϨʔϜϫʔΫ

    ʢFacebook੡, React΍YarnͳͲͰ΋ར༻)
    • ΦʔϧΠϯϫϯͰɺগͳ͍ઃఆͰར༻Ͱ͖Δ
    • ؆୯ʹΧόϨοδΛऔಘͰ͖Δ
    • Vue.jsͰ΋΋ͪΖΜར༻͕Մೳ
    

    View Slide

17. Jestͷίʔυྫ
    // sum.js
    function sum(a, b) {
    return a + b
    }
    module.exports = sum
    // sum.test.js
    import sum from './sum'
    test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3)
    });
    

    View Slide

18. vue-test-utils
    • Vue.js޲͚ͷެࣜ୯ମςετϥΠϒϥϦ
    • VueίϯϙʔωϯτΛִ཭ͯ͠Ϛ΢ϯτͯ͠ಈ
    ࡞ͤ͞ɺςετΛߦ͏͜ͱ͕Ͱ͖Δ
    • JestΛ࢖ͬͨςετͷެࣜυΩϡϝϯτ͋Γ
    (https://vue-test-utils.vuejs.org/ja/guides/testing-SFCs-with-jest.html)
    

    View Slide

19. wrapper (vue-test-utils)
    • ίϯϙʔωϯτͱԾ૝ DOM Λςετ͢Δϝ
    ιουΛؚΉΦϒδΣΫτ
    • mount / shallowϝιουͰίϯϙʔωϯτΛ
    ࢦఆͯ͠ɺॳظԽ͢Δ
    • wrapper.findͰDOMΤϨϝϯτΛࢦఆͯ͠ɺ
    triggerͰΠϕϯτΛൃՐͤ͞Δ͜ͱ͕Մೳ
    

    View Slide

20. vue-test-utilsΛ༻͍ͨྫ
    test('close the app', () => {
    // Arrange
    const wrapper = shallow(TriggerButton)
    // Act
    wrapper.find('.close').trigger('click')
    // Assert
    expect(store.state.closed).toBe(true)
    })
    

    View Slide

21. Jestͱvue-test-utilsͷ
    ϓϩδΣΫτ΁ͷಋೖ
    

    View Slide

22. ύοέʔδͷΠϯετʔϧ
    • yarn add @vue/test-utils jest vue-
    jest babel-jest jest-serializer-
    vue --dev
    • jest.config.jsʹઃఆϑΝΠϧΛ௥Ճ
    • Rails 5.1ͷϓϩδΣΫτͰWebpackerΛ࢖༻
    ͍ͯ͠ΔͷͰɺ༰қʹಋೖͰ͖ͨɻ
    

    View Slide

23. jest.config.js
    module.exports = {
    "moduleFileExtensions": [
    "js", "json", "vue"
    ],
    "moduleNameMapper": {
    "^@/(.*)$": "/app/javascript/$1"
    },
    "transform": {
    ".*\\.(vue)$": "/node_modules/vue-jest",
    "^.+\\.js$": "/node_modules/babel-jest"
    },
    "snapshotSerializers": [
    "/node_modules/jest-serializer-vue"
    ],
    "testRegex": "/app/javascript/test/.*\\.test\\.js$"
    }
    

    View Slide

24. ·ͱΊ
    • Jestͱvue-test-utilsΛಋೖ͢Ε͹ɺ؆୯ʹ
    Vue.jsίϯϙʔωϯτͷ୯ମςετΛॻ͘͜ͱ
    ͕Ͱ͖Δɻ
    • ϑϩϯτΤϯυͷςετίʔυ΋ͲΜͲΜॻ
    ͍͍͖ͯ·͠ΐ͏ɻ
    

    View Slide