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-utils
Search
Ryo Hashimoto
April 25, 2018
Technology
0
270
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
2.7k
Other Decks in Technology
See All in Technology
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
地理情報とAPIのトレンド
nagix
0
160
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
AOAI Dev Day - Opening Session
yoshidashingo
2
430
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Scaling GitHub
holman
458
140k
What the flash - Photography Introduction
edds
65
11k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Code Review Best Practice
trishagee
58
16k
Into the Great Unknown - MozCon
thekraken
20
1.3k
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ίϯϙʔωϯτͷ୯ମςετΛॻ͘͜ͱ ͕Ͱ͖Δɻ • ϑϩϯτΤϯυͷςετίʔυͲΜͲΜॻ ͍͍͖ͯ·͠ΐ͏ɻ