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
Testing Vue components with Jest and vue-test-u...
Search
Ryo Hashimoto
April 25, 2018
Technology
0
290
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
Share
More Decks by Ryo Hashimoto
See All by Ryo Hashimoto
What's new in Ruby on Rails 5.2
ryohashimoto
4
3k
Other Decks in Technology
See All in Technology
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
広島銀行におけるAWS活用の取り組みについて
masakimori
0
140
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
3
210
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
130
.NET開発者のためのAzureの概要
tomokusaba
0
230
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
190
帳票Vibe Coding
terurou
0
140
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
DeNA での思い出 / Memories at DeNA
orgachem
PRO
3
1.6k
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
240
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
1.8k
Browser
recruitengineers
PRO
4
340
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building an army of robots
kneath
306
46k
Building Applications with DynamoDB
mza
96
6.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Into the Great Unknown - MozCon
thekraken
40
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Six Lessons from altMBA
skipperchong
28
4k
RailsConf 2023
tenderlove
30
1.2k
Transcript
Testing Vue components with Jest and vue-test-utils @ryohashimoto
ࠓճ͓͢͠Δ͜ͱ • 2िؒ΄ͲલʹɺVue.jsΛϑϩϯτΤϯυͰ ͬͨRuby on RailsͷϓϩδΣΫτͰɺJest ͱvue-test-utilsΛಋೖɻ • ؆୯ʹVueίϯϙʔωϯτͷ୯ମςετ͕ॻ͚ ΔΑ͏ʹͳͬͯɺΧόϨοδऔΕΔΑ͏ʹ
ͳͬͨɻ
ͳͥɺVueίϯϙʔωϯτͷ ςετΛߦ͏͔ʁ
Why? • ֤ίϯϙʔωϯτ͕ࢦఆ͞Εͨঢ়ଶͰਖ਼͘͠ ಈ͘͜ͱΛอূ͢ΔͨΊʢϢχοτςετʣ • खಈςετͷ߹ͷखؒʢϒϥβͷૢ࡞ʣ Λল͖ɺCIͰ࣮ߦՄೳʹ͢ΔͨΊ • কདྷతͳVue.jsͷΞοϓάϨʔυʹඋ͑ΔͨΊ
Vue.jsΞϓϦέʔγϣϯͷ ߏཁૉ
Vueίϯϙʔωϯτ • HTMLςϯϓϨʔτ+Vue.jsίʔυ • ΧϓηϧԽ͞Εͨ࠶ར༻Մೳͳίʔυ • ୯ҰϑΝΠϧίϯϙʔωϯτ(.vue֦ுࢠ)Λ ༻Ͱ͖Δ • Έ߹ΘͤΔ͜ͱͰΞϓϦέʔγϣϯΛߏ
Vueίϯϙʔωϯτͷྫ <template> <p>{{ greeting }} World!</p> </template> <script> module.exports =
{ data () { return { greeting: 'Hello' } } } </script> JavaScript (ES6) HTML
Vuex ετΞ • ΞϓϦέʔγϣϯͷঢ়ଶʢεςʔτʣΛҰݩ อ࣋͢Δ • ঢ়ଶͷมԽϛϡʔςʔγϣϯͷίϛοτʹ Αͬͯߦ͏ • ίϯϙʔωϯτຖʹঢ়ଶΛ࣋ͨͳͯ͘ࡁΉ
(ύϥϝʔλͷड͚͕͠ෆཁʹͳΔ)
Vuex ετΞͷྫ const store = new Vuex.Store({ state: { count:
0 }, mutations: { increment (state) { state.count++ } } }) εςʔτ ύϥϝʔλ ϛϡʔςʔγϣϯ ૢ࡞
Vueίϯϙʔωϯτͷςετ
લఏɿ୯ମςετͷ3-A • Arrange (४උ) ॳظԽ͠ɺσʔλΛ४උ͢Δ • Act (࣮ߦ) ςετରͱͳΔॲཧΛ࣮ߦ͢Δ •
Assert (ݕূ) ༧ଌ௨Γʹಈ࡞͢Δ͜ͱΛݕূ͢Δ
Vueίϯϙʔωϯτͷ3A (1) Vue component Vuex state HTML • Vueίϯϙʔωϯτʹ VuexεςʔτΛೖྗͱ
ͯ͠༩͑Δ͜ͱͰɺHTMLΛग़ྗ͢Δ • Arrange: VuexεςʔτɺAct: Vueίϯϙʔω ϯτɺAssert: HTML
Vueίϯϙʔωϯτͷ3A (2) Vue component Vuex state HTML Event • ΠϕϯτΛ༩͑ͨ߹ʢΫϦοΫͳͲʣ
• Arrange: Vuexεςʔτ, Act: Πϕϯτ / Vueί ϯϙʔωϯτ, Assert: HTML / Vuexεςʔτ
Vueίϯϙʔωϯτͷςετཁ݅ • Vue ίϯϙʔωϯτ୯ମͰςετ͕Ͱ͖Δ • VuexετΞɺΠϕϯτͳͲΛਖ਼͘͠ѻ͑Δ • πʔϧͷಋೖ͕؆୯ͰɺΧόϨοδऔΕΔ • Jest
ͱ vue-test-utilsͳΒશ͕ͯՄೳʂ
ςετͷπʔϧ (Jest / vue-test-utils)
Jest • JavaScriptͷςετϑϨʔϜϫʔΫ ʢFacebook, ReactYarnͳͲͰར༻) • ΦʔϧΠϯϫϯͰɺগͳ͍ઃఆͰར༻Ͱ͖Δ • ؆୯ʹΧόϨοδΛऔಘͰ͖Δ •
Vue.jsͰͪΖΜར༻͕Մೳ
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) });
vue-test-utils • Vue.js͚ͷެࣜ୯ମςετϥΠϒϥϦ • VueίϯϙʔωϯτΛִͯ͠Ϛϯτͯ͠ಈ ࡞ͤ͞ɺςετΛߦ͏͜ͱ͕Ͱ͖Δ • JestΛͬͨςετͷެࣜυΩϡϝϯτ͋Γ (https://vue-test-utils.vuejs.org/ja/guides/testing-SFCs-with-jest.html)
wrapper (vue-test-utils) • ίϯϙʔωϯτͱԾ DOM Λςετ͢Δϝ ιουΛؚΉΦϒδΣΫτ • mount /
shallowϝιουͰίϯϙʔωϯτΛ ࢦఆͯ͠ɺॳظԽ͢Δ • wrapper.findͰDOMΤϨϝϯτΛࢦఆͯ͠ɺ triggerͰΠϕϯτΛൃՐͤ͞Δ͜ͱ͕Մೳ
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) })
Jestͱvue-test-utilsͷ ϓϩδΣΫτͷಋೖ
ύοέʔδͷΠϯετʔϧ • yarn add @vue/test-utils jest vue- jest babel-jest jest-serializer-
vue --dev • jest.config.jsʹઃఆϑΝΠϧΛՃ • Rails 5.1ͷϓϩδΣΫτͰWebpackerΛ༻ ͍ͯ͠ΔͷͰɺ༰қʹಋೖͰ͖ͨɻ
jest.config.js module.exports = { "moduleFileExtensions": [ "js", "json", "vue" ],
"moduleNameMapper": { "^@/(.*)$": "<rootDir>/app/javascript/$1" }, "transform": { ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest", "^.+\\.js$": "<rootDir>/node_modules/babel-jest" }, "snapshotSerializers": [ "<rootDir>/node_modules/jest-serializer-vue" ], "testRegex": "/app/javascript/test/.*\\.test\\.js$" }
·ͱΊ • Jestͱvue-test-utilsΛಋೖ͢Εɺ؆୯ʹ Vue.jsίϯϙʔωϯτͷ୯ମςετΛॻ͘͜ͱ ͕Ͱ͖Δɻ • ϑϩϯτΤϯυͷςετίʔυͲΜͲΜॻ ͍͍͖ͯ·͠ΐ͏ɻ