$30 off During Our Annual Pro Sale. View Details »

Testing Vue components with Jest and vue-test-utils

Testing Vue components with Jest and vue-test-utils

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

Ryo Hashimoto

April 25, 2018
Tweet

More Decks by Ryo Hashimoto

Other Decks in Technology

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