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

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. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠