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
転職初っ端終了しました
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Tyankatsu
March 05, 2019
Programming
2
860
転職初っ端終了しました
FrontEnd Test Night - Fukuoka
山本勝也
Tyankatsu
March 05, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
370
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
780
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
660
アニメーションは どうやってできているのか
tyankatsu
0
130
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
700
npmパッケージ製作に関するあれこれ
tyankatsu
1
1.1k
commit message 絶対統一させるマン
tyankatsu
1
240
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.2k
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
Patterns of Patterns
denyspoltorak
0
1.3k
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.2k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
nash_efp
0
820
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
izumin5210
6
1.8k
AI時代の認知負荷との向き合い方
optfit
0
130
Architectural Extensions
denyspoltorak
0
260
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
190
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
uki00a
0
280
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
950
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
440
Featured
See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
720
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
110
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
150
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
100k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
120
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
88
Typedesign – Prime Four
hannesfritz
42
2.9k
RailsConf 2023
tenderlove
30
1.3k
The SEO Collaboration Effect
kristinabergwall1
0
350
Bash Introduction
62gerente
615
210k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
0
1.8k
Crafting Experiences
bethany
1
44
Transcript
స৬ॳͬ ऴྃ͠·ͨ͠ 3/5 FrontEnd Test Night - Fukuoka
ࣗݾհ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Gridsome maintainer
• ӳޠษڧத • ࠷ۙδϜߦ͖ͩ͠·ͨ͠
None
None
ҙ • ͋͘·Ͱͷߟ͑Δςετʹ͍ͭͯͷͳͷͰɺؒ ҧͬͯΔͱ͜Ζ͕͋Δ͔Εͳ͍Ͱ͢ɻ • ؒҧͬͯͨΒTwitterͰࢦఠͯ͠΄͍͠Ͱ͢ɻ • ࣗ͜͏ࢥ͏ͬͯײ͍ͩ͘͞
https://discord.gg/XSQ6c3X
ࠓ͢͜ͱ • ςετͱͷग़ձ͍ • ςετͷΘ͔Βͳ͍Λղܾ͍ͯ͘͠աఔ
ςετͱͷ ࠷ॳͷग़ձ͍
ձࣾ
ձࣾ • JestΛ༻ͨ͠Ϣχοτςετ • Vueͷίϯϙʔωϯτͱstoreͷςετ • ςετ͕௨Βͳ͔ͬͨΒTravisʹౖΒΕͯϓϧϦΫ͕ ҰੜϚʔδͰ͖ͳ͍
Ұੜ ϚʔδͰ͖ͳ͍
࣌ͷͷεϖοΫ • WebσβΠφʔ͔ΒϑϩϯτΤϯυΤϯδχΞ • CIʁ • ςετʁ • ΧόϨοδʁ •
Ϛονϟʔʁ • ελϒʁ • ϞοΫʁ
͓ɹΘɹΓ
ϦʔμʔʹఏҊ
ʮ͠Β͘ςετ͚ͩॻ͔ͤͯʯ
ʮ͏͍ʯ
ʮͪΐΖ͍ʯ
Θ͔Βͳ͍͜ͱΛ ϦετΞοϓ
େ͖͚͘Δͱ3ͭ • ͳͥςετΛॻ͘ͷ͔ • Ͳ͏ͬͯςετ͢Δͷ͔ • ԿΛςετ͢Δͷ͔
ͳͥςετΛॻ͘ͷ͔
;ͱࢥ͏
ςετ͍ΒΜ͘ͳ͍ʁ
ςετͳͯ͘ಈ͘Α
͔Δ
None
ςετίʔυʹWhat Λॻ͜͏
͜ͷίʔυԿʁΛઆ໌
ͿͬͪΌ͚
ͳͯ͘ಈ͘
͚Ͳ
ͳ͍ͱίʔυʹແ
͡Ό͋ඞཁͰ͢Ͷ☺
͍Ζ͍Ζௐͨ • RSpecͷ͍ํʢΑ͘ฉ͘ςετ͔ͩͬͨΒʣ • ςετͷख๏ʢTDDͱ͔BDDͱ͔ʣ • ςετͷछྨʢϢχοτςετͱ͔E2Eͱ͔ʣ
ͳͥςετΛॻ͘ͷ͔ • ػೳͷઆ໌ • मਖ਼Λ༰қʹ͢Δ
ػೳͷઆ໌
ػೳͷઆ໌ • ͦͷػೳԿΛظͯ͠ԿΛظ͍ͯ͠ͳ͍ͷ͔ • ػೳͷ࣮ऀͦͷػೳΛӬԕʹઆ໌Ͱ͖Δ͔ • ࣮ऀͦͦଆʹ͍Δͷ͔
मਖ਼Λ༰қʹ͢Δ
मਖ਼Λ༰қʹ͢Δ • ػೳΛมߋɺमਖ਼͢Δ߹ʹɺظ͢Δ݁Ռ͕ಘΒ ΕΔͷ͔อো͢Δ • ාͯ͘खΛՃ͑ΒΕͳ͍ͱ͍͏͜ͱ͔ΒಀΕΔ
Ͳ͏ͬͯςετ͢Δͷ͔
None
Jest • Facebook༷ • ͳΜͰཉுΓϋοϐʔηοτ • ͜Ε͑͞ೖΕΕςετ͕Ұ௨Γग़དྷΔʂ⚙ • snapshotࡱΕͯDOMͷมߋݕʂ •
ݱঢ়͜ΕҰ • εϐʔυ͍͚Ͳ'ɹ˞ମײ
JestͰͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱదٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉ
JestͰͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱదٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉɹˡ͜Ε
ಡΜͰΈͯ • vue-test-utilsͱJestΈ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔϞοΫʹ͓͚͍͍ͯ͠ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ
ಡΜͰΈͯ • vue-test-utilsͱJestΈ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔϞοΫʹ͓͚͍͍ͯ͠ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ
ʮ͜Ε͋͛Δʯ
Wallaby.jsͷϥΠηϯε
ʮ͋ɺ͍ʯ
3 days later ...
ʮWallaby࠷ˍߴʯ
ʮWallaby࠷ˍߴʯ
Wallaby.jsͷੌ͍ͱ͜Ζ • શϑΝΠϧ୳ࡧͯ͠ςετͯ͠ͳ͍ͱ͜Ζݟ͚ͭΔ • ϑΝΠϧ͝ͱͷΧόϨοδग़ͯ͘͠ΕΔ • Τϥʔग़ͯΔͱ͜Ζڭ͑ͯ͘ΕΔ • ΤϥʔՕॴͷৄࡉΛϩάʹग़ྗͯ͘͠ΕΔ •
ϩά݁Ռ͕͙͢ӈʹग़Δ • ରԠ͕ૣ͍ • ϑϦʔϓϥϯ࠷ѱʢߪೖ࠵ଅˍ࠵ଅˍ࠵ଅʣ
ϩά݁Ռ͕͙͢ӈʹग़Δ
ϗόʔ͢Εৄࡉ֬ೝՄೳ
ςετ͕௨Ε৭
ςετ͕௨Βͳ͚Ε৭
None
ͦͷؒ ࣮ʹ30ඵͷग़དྷࣄ
Jest + Wallaby.js ͭΑͭΑͰ͋Δɻ ৄࡉͪ͜Β https://wallabyjs.com/
ԿΛςετ͢Δͷ͔
ςετ͕ॻ͚Δڥ
Ͱ͖ͨͱͯ͠
ͳʹΛςετ͢Δͷʁ
Jestͷ υΩϡϝϯτΛݟͯΔͱ ײͮ͘
͕༧ظ͢Δͷ ͕༧ظ͠ͳ͍ͷ ΛϚονϟʔͰςετ
ͭ·Γ
ظ͢Δɺঢ়ଶ ظ͠ͳ͍ɺঢ়ଶ
۩ମྫ • ؔظͨ͠ฦΓΛฦͯ͘͠ΕΔͷ͔ • propsstatedataͷʹΑΔDOM༧ظͨ͠ͷ ͔ • storeͷstate͕actionͰมΘΔͷ͔ • mutation͢Δͱ͖ʹactionݺΕ͍ͯΔͷ͔
payloadಉ࣌ʹͯ͠Δͷ͔ • ϦϯΫΛԡͨ͠ΒͲͷϖʔδʹߦ͘ͷ͔
۩ମྫ • Ҿʹ2Λ͔͚ͯΛฦؔ͢࡞ͬͨΑ • Ҿʹ5ΛೖΕͨΒ10͕ฦΔͷ͔ • Ҿʹ-5ΛೖΕͨΒ-10͕ฦΔͷ͔ • Ҿʹ0ΛೖΕͨΒ0͕ฦΔͷ͔ •
Ҿ͕ࣈҎ֎ͩͬͨΒError͕ฦΔͷ͔
۩ମྫ • ϑΥʔϜͰsubmitͨ͠Β/completeʹඈͿΑ • submitͨ͠ΒURL/completeͳͷ͔ • /completeʹτοϓʹΔϘλϯ͕͋Δ͔ • /completeͷτοϓʹΔϘλϯΛԡͨ͠ΒURL /ʹͳ͍ͬͯΔͷ͔
͜͏ͯ͠ ςετʹ͏Δ͍͞Ϛϯʹ ͳ͍ͬͯͬͨ ʢࣝ·ͩઙ͍ͱࢥ͏ʣ
ۦ͚ʹͳ͚ͬͨͲ ·ͱΊ
·ͱΊ • ͳͥςετΛ͢Δͷ͔ • ࣮ͷػೳΛอো͢Δ • Ͳ͏ͬͯςετΛ͢Δͷ͔ • JestͱWallaby࠷&ߴ •
ԿΛςετ͢Δͷ͔ • ظ͢Δɺঢ়ଶ • ظ͠ͳ͍ɺঢ়ଶ
͓ΘΓ