Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JestとWallaby.jsで始める楽しいJavaScript testing
Shunta Saito
June 26, 2019
Programming
2
920
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
260
Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る
subuta
0
150
Tailwind CSSでいろんなUIをつくる
subuta
3
730
SPA & JWT でWeb アプリケーションを作る
subuta
0
130
jspmで爆速開発する
subuta
1
1.1k
Other Decks in Programming
See All in Programming
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
140
JetpackCompose 導入半年で感じた 改善点
spbaya0141
0
140
YATA: collaborative documents and how to make them fast
horusiath
1
140
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
料理の注文メニューの3D化への挑戦
hideg
0
280
Getting Started With Data Structures
adoranwodo
1
260
Pluggable Storage in PostgreSQL
sira
1
190
Efficient UI testing in Android
alexzhukovich
1
120
Reactは何を提供するLibraryなのか?
taro28
6
920
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.6k
kintoneでランダム取得を作ってみた(imoniCamp 2022-07-27)
shokun1108
0
140
20220706_Google Apps Scriptを実演で学ぶ~ GAS × Slack ~
apachan
2
610
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
560
Build your cross-platform service in a week with App Engine
jlugia
219
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Visualization
eitanlees
125
12k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
Practical Orchestrator
shlominoach
178
8.7k
Raft: Consensus for Rubyists
vanstee
127
5.5k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.8k
Side Projects
sachag
450
37k
How to name files
jennybc
40
63k
Stop Working from a Prison Cell
hatefulcrawdad
262
17k
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ͱ͍͏πʔϧ͋Γ·͢ɻ Կ͔Χοί͍͍ ͭ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠