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
JestとWallaby.jsで始める楽しいJavaScript testing
Search
Shunta Saito
June 26, 2019
Programming
2
1.6k
JestとWallaby.jsで始める楽しいJavaScript testing
JestとWallaby.jsを使ってモックを含むテストを書く方法を共有します。
https://github.com/subuta/play-with-jest
Shunta Saito
June 26, 2019
Tweet
Share
More Decks by Shunta Saito
See All by Shunta Saito
Nuxt.jsの静的サイト 出力を試してみる
subuta
0
550
Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る
subuta
0
350
Tailwind CSSでいろんなUIをつくる
subuta
3
1.2k
SPA & JWT でWeb アプリケーションを作る
subuta
0
230
jspmで爆速開発する
subuta
1
1.3k
Other Decks in Programming
See All in Programming
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
株式会社 Sun terras カンパニーデック
sunterras
0
270
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
オープンソースソフトウェアへの解像度🔬
utam0k
12
2.5k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
210
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
220
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
800
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
970
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
640
CSC509 Lecture 04
javiergs
PRO
0
300
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
The Cult of Friendly URLs
andyhume
79
6.6k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Balancing Empowerment & Direction
lara
4
680
Designing for humans not robots
tammielis
254
26k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Making Projects Easy
brettharned
119
6.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
GitHub's CSS Performance
jonrohan
1032
470k
Transcript
JestͱWallaby.jsͰ࢝ΊΔ ָ͍͠JavaScript testing @subuta 2019/6/26
ࣗݾհ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷͷ͕͖Ͱ ͢ɻ࠷͓ۙࣄͰ Node.js(Koa +
Next.js)Λ͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ͖Ͱ͕͢ɺVue.js Angular.jsᅂΉఔʹ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద ͳͷΛબͿͷ͕ྑͦ͞͏ɻ
Jestͱ Jest is a delightful JavaScript Testing Framework with a
focus on simplicity.
Jestͱ Jest is a delightful JavaScript Testing Framework with a
focus on simplicity. γϯϓϧ͞ʹϑΥʔΧεָ͍ͨ͠͠+BWB4DSJQU 5FTUJOH'SBNFXPSL
Wallaby.jsͱ Wallaby.js runs your JavaScript tests immediately as you type
and displays execution results in your code editor. It also provides beautiful test and code coverage reports updated in realtime.
Wallaby.jsͱ Wallaby.js runs your JavaScript tests immediately as you type
and displays execution results in your code editor. It also provides beautiful test and code coverage reports updated in realtime. 8BMMBCZKT͋ͳͨͷςετίʔυΛλΠϐϯάʹԠ ࣮ͯ͡ߦ͠ɺ࣮ߦ݁ՌΛΤσΟλ্ʹදࣔ͠·͢ɻ ·ͨϦΞϧλΠϜͰͷςετͷ࣮ߦ݁Ռ͓Αͼίʔυ ΧόϨοδͷϨϙʔτදࣔߦ͍·͢ɻ
࣍ w ԿΛςετ͖͔͢ w ςετͷ࣮ྫ
ԿΛςετ͖͔͢ Ͳ͏ͤΔͳΒཏతʹΓ͍ͨ ίʔυΧόϨο δΛʹ͍ͨ͠ ͷͰɺͯ͢ͷςετΛॻ͖ͨ ͍ɾɾ
ԿΛςετ͖͔͢ Ͳ͏ͤΔͳΒཏతʹΓ͍ͨ ίʔυΧόϨοδΛ ʹ͍ͨ͠ ͷͰɺͯ͢ͷςετΛॻ͖͍ͨɾɾ ݱ࣮తʹݫ͍͠ɻ w ͍͍ͩͨͷϓϩδΣΫτͰͦΜͳ༨༟ ࣌ؒ༧ࢉ
ͳ ͍ɻ w ͷ࣭Ͱ࡞Δͷ؆୯͚ͩͲɺΓͷΛΓ͖ Ζ͏ͱ͢Δͱ͕͔͔࣌ؒΔɻ lύϨʔτͷ๏ଇzతͳͭ
ԿΛςετ͖͔͢ ⭕࠷ݶɺඞཁͳͱ͜Ζ͚ͩςετΛॻ͘ɻ
ԿΛςετ͖͔͢ ⭕ྫ͑͜ΜͳςετΛॻ͘ w खͰςετ͢Δͷ͕͍͠ ໘ͳ Օॴ w ྫލ͗ ࠷খ࠷େͷೖྗ w
αʔϏεͷࠜװʹؔΘΔ ॏཁͳ ॲཧ w ྫ͓ۚपΓͷॲཧ ݸਓใʹؔΘΔॲཧ
ԿΛςετ͖͔͢ ❌ٯʹ͜Μͳςετෆཁ ˞ݸਓͷҙݟͰ͢ w ϥΠϒϥϦͷڍಈ w ͦͦϥΠϒϥϦଆͰςετΛॻ͍ͯΔͣɻ w 6*ͷςετ
w ߹ ϓϩμΫτͷੑ࣭ɺ։ൃن ʹΑΔ͕ɺ6* ίϩίϩมΘΔͷͰɺॻ͍ͯແବʹͳΓ͕ͪ
ςετͷ࣮ྫ(σϞ) IUUQTHJUIVCDPNTVCVUBQMBZXJUIKFTU ੫ࠐΈͷஈΛ࣋ͬͨ%#ͷαϯϓϧ w ୯ମςετ w ݁߹ςετ %#࿈ܞ ͔Βͷফඅ੫૿੫
ʹͲ͏ରԠ͢Δ͔ɾɾʹ
ͨ͜͠ͱ w 4JOPO+4ͷVTF'BLF5JNFST ͱ͍͏ͷΛ͏ͱɺ ͷϞοΫ͕Ͱ͖Δɻ˞+FTUʹΈࠐΈͷ VTF'BLF5JNFST ͕͋Δɻ w KFTUGO Λ͏ͱɺؔΛϞοΫͰ͖Δɻ˞Πϕϯ
τϋϯυϥ ྫPO$MJDL ͷςετͱ͔Ͱ͑ͯศར w KFTUNPDL Λ͏ͱɺಛఆͷϞδϡʔϧΛϞοΫ Ͱ͖Δɻ˞@@NPDLT@@σΟϨΫτϦʹϑΝΠϧΛஔ ͘͜ͱͰࣗಈͰϞοΫ͢ΔΈ͋Γ·͢ɻ
Wallaby.jsͷྑ͍ͱ͜Ζ w ςετͷ࣮ߦ݁Ռ͕ɺ࣮ߦՕॴͷۙ͘ʹ ͙͢ʹ ද ࣔ͞ΕΔɻ w ΧόϨοδ͕ΤσΟλ্ʹදࣔ͞ΕΔɻ˞ΧόϨο δࣗମOZDͳͲΛ͑औΕΔɻ w
؆қతͳϕϯνϚʔΫ͍ͯΔ ࣮ߦ͕͍ॲཧΛ ݟ͚͍ͭ͢
ςετͷվળͷࣄྫ →
͓·͚ w KFTUTQZ0O Λ͏ͱɺϝιουݺͼग़͠ΛϞοΫ Ͱ͖Δɻ ϞοΫݩͷݺͼग़͠Λ͙߹ KFTUTQZ0O NPDL*NQMFNFOUBUJPO Λ͏ɻ
w +FTUʹ4OBQTIPU5FTUJOHͱ͍͏6*ͷςετ͚ʹ ར༻Ͱ͖Δػೳ͕͋Γ·͢ɻ w &&ςετ ϒϥβʹΑΔࣗಈςετ Λߦ͏߹ɺ $ZQSFTTͱ͍͏πʔϧ͋Γ·͢ɻ Կ͔Χοί͍͍ ͭ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠