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.5k
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
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
21
5.6k
print("Hello, World")
eddie
1
530
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
0
110
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.6k
Namespace and Its Future
tagomoris
6
700
testingを眺める
matumoto
1
140
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
130
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
Improving my own Ruby thereafter
sisshiki1969
1
160
旅行プランAIエージェント開発の裏側
ippo012
2
890
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Facilitating Awesome Meetings
lara
55
6.5k
It's Worth the Effort
3n
187
28k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Build your cross-platform service in a week with App Engine
jlugia
231
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Invisible Side of Design
smashingmag
301
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Cult of Friendly URLs
andyhume
79
6.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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ͱ͍͏πʔϧ͋Γ·͢ɻ Կ͔Χοί͍͍ ͭ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠