Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

06b9c7286903fd1062a201e1a3ac65d9?s=128

Shunta Saito

June 26, 2019
Tweet

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ʹ͸4OBQTIPU5FTUJOHͱ͍͏6*ͷςετ޲͚ʹ ར༻Ͱ͖Δػೳ͕͋Γ·͢ɻ w &&ςετ ϒϥ΢βʹΑΔࣗಈςετ Λߦ͏৔߹͸ɺ $ZQSFTTͱ͍͏πʔϧ΋͋Γ·͢ɻ Կ͔Χοί͍͍ ΍ͭ
  18. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠