JestとWallaby.jsで始める楽しいJavaScript testing

JestとWallaby.jsを使ってモックを含むテストを書く方法を共有します。

https://github.com/subuta/play-with-jest

Transcript

1. JestͱWallaby.jsͰ࢝ΊΔ ָ͍͠JavaScript testing @subuta 2019/6/26
2. ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa + Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
3. Jestͱ͸ Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
4. Jestͱ͸ Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
 γϯϓϧ͞ʹϑΥʔΧεָ͍ͨ͠͠+BWB4DSJQU
   5FTUJOH
   'SBNFXPSL
5. 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.
6. 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͸͋ͳͨͷςετίʔυΛλΠϐϯάʹԠ ࣮ͯ͡ߦ͠ɺ࣮ߦ݁ՌΛΤσΟλ্ʹදࣔ͠·͢ɻ
 ·ͨϦΞϧλΠϜͰͷςετͷ࣮ߦ݁Ռ͓Αͼίʔυ ΧόϨοδͷϨϙʔτදࣔ΋ߦ͍·͢ɻ
7. ໨࣍ w ԿΛςετ͢΂͖͔
   w ςετͷ࣮૷ྫ
8. ԿΛςετ͢΂͖͔
   Ͳ͏ͤ΍ΔͳΒ໢ཏతʹ΍Γ͍ͨ ίʔυΧόϨο δΛʹ͍ͨ͠ ͷͰɺ͢΂ͯͷςετΛॻ͖ͨ ͍ɾɾ
9. ԿΛςετ͢΂͖͔
   Ͳ͏ͤ΍ΔͳΒ໢ཏతʹ΍Γ͍ͨ ίʔυΧόϨοδΛ ʹ͍ͨ͠ ͷͰɺ͢΂ͯͷςετΛॻ͖͍ͨɾɾ
 
 ݱ࣮తʹ͸ݫ͍͠ɻ
   w ͍͍ͩͨͷϓϩδΣΫτͰͦΜͳ༨༟ ࣌ؒ༧ࢉ ͸ͳ ͍ɻ
   w ͷ඼࣭Ͱ࡞Δͷ͸؆୯͚ͩͲɺ࢒ΓͷΛ΍Γ͖ Ζ͏ͱ͢Δͱ͕͔͔࣌ؒΔɻ lύϨʔτͷ๏ଇzతͳ΍ͭ
10. ԿΛςετ͢΂͖͔ ⭕
    ࠷௿ݶɺඞཁͳͱ͜Ζ͚ͩςετΛॻ͘ɻ
11. ԿΛςετ͢΂͖͔ ⭕
    ྫ͑͹͜ΜͳςετΛॻ͘
    w खͰςετ͢Δͷ͕೉͍͠ ໘౗ͳ Օॴ
    w ྫ
    ೔෇ލ͗ ࠷খ஋࠷େ஋ͷೖྗ
    w αʔϏεͷࠜװʹؔΘΔ ॏཁͳ ॲཧ
    w ྫ
    ͓ۚपΓͷॲཧ ݸਓ৘ใʹؔΘΔॲཧ
12. ԿΛςετ͢΂͖͔ ❌
    ٯʹ͜Μͳςετ͸ෆཁ ˞ݸਓͷҙݟͰ͢
    w ϥΠϒϥϦͷڍಈ
    w ͦ΋ͦ΋ϥΠϒϥϦଆͰςετΛॻ͍ͯΔ͸ͣɻ
    w 6*ͷςετ
    w ৔߹ ϓϩμΫτͷੑ࣭ɺ։ൃن໛ ʹ΋ΑΔ͕ɺ6* ͸ίϩίϩมΘΔͷͰɺॻ͍ͯ΋ແବʹͳΓ͕ͪ
13. ςετͷ࣮૷ྫ(σϞ) IUUQTHJUIVCDPNTVCVUBQMBZXJUIKFTU
    ੫ࠐΈͷ஋ஈΛ࣋ͬͨ঎඼%#ͷαϯϓϧ
    w ୯ମςετ
    w ݁߹ςετ %#࿈ܞ
    ͔Βͷফඅ੫૿੫  
 ʹͲ͏ରԠ͢Δ͔ɾɾ
    
    ʹ஫໨
14. ࿩ͨ͜͠ͱ w 4JOPO+4ͷ
    VTF'BLF5JNFST
    ͱ͍͏ͷΛ࢖͏ͱɺ ೔෇ͷϞοΫ͕Ͱ͖Δɻ˞+FTUʹ΋૊ΈࠐΈͷ
    VTF'BLF5JNFST
    ͕͋Δɻ
    w KFTUGO
    Λ࢖͏ͱɺؔ਺ΛϞοΫͰ͖Δɻ˞Πϕϯ τϋϯυϥ ྫ
    PO$MJDL ͷςετͱ͔Ͱ΋࢖͑ͯศར
    w KFTUNPDL
    Λ࢖͏ͱɺಛఆͷϞδϡʔϧΛϞοΫ Ͱ͖Δɻ˞@@NPDLT@@
    σΟϨΫτϦʹϑΝΠϧΛஔ ͘͜ͱͰࣗಈͰϞοΫ͢Δ࢓૊Έ΋͋Γ·͢ɻ
15. Wallaby.jsͷྑ͍ͱ͜Ζ w ςετͷ࣮ߦ݁Ռ͕ɺ࣮ߦՕॴͷۙ͘ʹ ͙͢ʹ ද ࣔ͞ΕΔɻ
    w ΧόϨοδ͕ΤσΟλ্ʹදࣔ͞ΕΔɻ˞ΧόϨο δࣗମ͸
    OZD
    ͳͲΛ࢖͑͹औΕΔɻ
    w ؆қతͳϕϯνϚʔΫ΋෇͍ͯΔ ࣮ߦ͕஗͍ॲཧΛ ݟ͚ͭ΍͍͢
16. ςετͷ଎౓վળͷࣄྫ →
17. ͓·͚ w KFTUTQZ0O
    Λ࢖͏ͱɺϝιουݺͼग़͠ΛϞοΫ Ͱ͖Δɻ ϞοΫݩͷݺͼग़͠Λ๷͙৔߹͸
    KFTUTQZ0O 
    NPDL*NQMFNFOUBUJPO
    Λ࢖͏ɻ
    w +FTUʹ͸4OBQTIPU
    5FTUJOHͱ͍͏6*ͷςετ޲͚ʹ ར༻Ͱ͖Δػೳ͕͋Γ·͢ɻ
    w &&ςετ ϒϥ΢βʹΑΔࣗಈςετ Λߦ͏৔߹͸ɺ $ZQSFTTͱ͍͏πʔϧ΋͋Γ·͢ɻ Կ͔Χοί͍͍ ΍ͭ
18. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠