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

Transcript

1. 1.

   JestͱWallaby.jsͰ࢝ΊΔ ָ͍͠JavaScript testing @subuta 2019/6/26

2. 2.

   ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa +

   Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
3. 3.

   Jestͱ͸ Jest is a delightful JavaScript Testing Framework with a

   focus on simplicity.
4. 4.

   Jestͱ͸ Jest is a delightful JavaScript Testing Framework with a

   focus on simplicity.
 γϯϓϧ͞ʹϑΥʔΧεָ͍ͨ͠͠+BWB4DSJQU
   5FTUJOH
   'SBNFXPSL
5. 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. 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. 7.

   ໨࣍ w ԿΛςετ͢΂͖͔
   w ςετͷ࣮૷ྫ

8. 8.

   ԿΛςετ͢΂͖͔
   Ͳ͏ͤ΍ΔͳΒ໢ཏతʹ΍Γ͍ͨ ίʔυΧόϨο δΛʹ͍ͨ͠ ͷͰɺ͢΂ͯͷςετΛॻ͖ͨ ͍ɾɾ

9. 9.

   ԿΛςετ͢΂͖͔
   Ͳ͏ͤ΍ΔͳΒ໢ཏతʹ΍Γ͍ͨ ίʔυΧόϨοδΛ ʹ͍ͨ͠ ͷͰɺ͢΂ͯͷςετΛॻ͖͍ͨɾɾ
 
 ݱ࣮తʹ͸ݫ͍͠ɻ
   w ͍͍ͩͨͷϓϩδΣΫτͰͦΜͳ༨༟ ࣌ؒ༧ࢉ

   ͸ͳ ͍ɻ
   w ͷ඼࣭Ͱ࡞Δͷ͸؆୯͚ͩͲɺ࢒ΓͷΛ΍Γ͖ Ζ͏ͱ͢Δͱ͕͔͔࣌ؒΔɻ lύϨʔτͷ๏ଇzతͳ΍ͭ
10. 10.

    ԿΛςετ͢΂͖͔ ⭕
    ࠷௿ݶɺඞཁͳͱ͜Ζ͚ͩςετΛॻ͘ɻ

11. 11.

    ԿΛςετ͢΂͖͔ ⭕
    ྫ͑͹͜ΜͳςετΛॻ͘
    w खͰςετ͢Δͷ͕೉͍͠ ໘౗ͳ Օॴ
    w ྫ
    ೔෇ލ͗ ࠷খ஋࠷େ஋ͷೖྗ
    w

    αʔϏεͷࠜװʹؔΘΔ ॏཁͳ ॲཧ
    w ྫ
    ͓ۚपΓͷॲཧ ݸਓ৘ใʹؔΘΔॲཧ
12. 12.

    ԿΛςετ͢΂͖͔ ❌
    ٯʹ͜Μͳςετ͸ෆཁ ˞ݸਓͷҙݟͰ͢
    w ϥΠϒϥϦͷڍಈ
    w ͦ΋ͦ΋ϥΠϒϥϦଆͰςετΛॻ͍ͯΔ͸ͣɻ
    w 6*ͷςετ
    

    w ৔߹ ϓϩμΫτͷੑ࣭ɺ։ൃن໛ ʹ΋ΑΔ͕ɺ6* ͸ίϩίϩมΘΔͷͰɺॻ͍ͯ΋ແବʹͳΓ͕ͪ
13. 13.

    ςετͷ࣮૷ྫ(σϞ) IUUQTHJUIVCDPNTVCVUBQMBZXJUIKFTU
    ੫ࠐΈͷ஋ஈΛ࣋ͬͨ঎඼%#ͷαϯϓϧ
    w ୯ମςετ
    w ݁߹ςετ %#࿈ܞ
    ͔Βͷফඅ੫૿੫

     
 ʹͲ͏ରԠ͢Δ͔ɾɾ
    
    ʹ஫໨
14. 14.

    ࿩ͨ͜͠ͱ w 4JOPO+4ͷ
    VTF'BLF5JNFST
    ͱ͍͏ͷΛ࢖͏ͱɺ ೔෇ͷϞοΫ͕Ͱ͖Δɻ˞+FTUʹ΋૊ΈࠐΈͷ
    VTF'BLF5JNFST
    ͕͋Δɻ
    w KFTUGO
    Λ࢖͏ͱɺؔ਺ΛϞοΫͰ͖Δɻ˞Πϕϯ

    τϋϯυϥ ྫ
    PO$MJDL ͷςετͱ͔Ͱ΋࢖͑ͯศར
    w KFTUNPDL
    Λ࢖͏ͱɺಛఆͷϞδϡʔϧΛϞοΫ Ͱ͖Δɻ˞@@NPDLT@@
    σΟϨΫτϦʹϑΝΠϧΛஔ ͘͜ͱͰࣗಈͰϞοΫ͢Δ࢓૊Έ΋͋Γ·͢ɻ
15. 15.

    Wallaby.jsͷྑ͍ͱ͜Ζ w ςετͷ࣮ߦ݁Ռ͕ɺ࣮ߦՕॴͷۙ͘ʹ ͙͢ʹ ද ࣔ͞ΕΔɻ
    w ΧόϨοδ͕ΤσΟλ্ʹදࣔ͞ΕΔɻ˞ΧόϨο δࣗମ͸
    OZD
    ͳͲΛ࢖͑͹औΕΔɻ
    w

    ؆қతͳϕϯνϚʔΫ΋෇͍ͯΔ ࣮ߦ͕஗͍ॲཧΛ ݟ͚ͭ΍͍͢
16. 16.

    ςετͷ଎౓վળͷࣄྫ →

17. 17.

    ͓·͚ w KFTUTQZ0O
    Λ࢖͏ͱɺϝιουݺͼग़͠ΛϞοΫ Ͱ͖Δɻ ϞοΫݩͷݺͼग़͠Λ๷͙৔߹͸
    KFTUTQZ0O 
    NPDL*NQMFNFOUBUJPO
    Λ࢖͏ɻ
    

    w +FTUʹ͸4OBQTIPU
    5FTUJOHͱ͍͏6*ͷςετ޲͚ʹ ར༻Ͱ͖Δػೳ͕͋Γ·͢ɻ
    w &&ςετ ϒϥ΢βʹΑΔࣗಈςετ Λߦ͏৔߹͸ɺ $ZQSFTTͱ͍͏πʔϧ΋͋Γ·͢ɻ Կ͔Χοί͍͍ ΍ͭ
18. 18.

    ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠