Reactコンポーネントにおけるテスト手法の選択肢

TechFeed Experts Night#2 〜 フロントエンドフレームワーク特集
https://techfeed.io/events/techfeed-experts-night-2

Twitter
https://twitter.com/__sakito__

Transcript

1. 3FBDUίϯϙʔωϯτʹ͓͚Δ
   

   ςετख๏ͷબ୒ࢶ
   5FDI'FFE&YQFSUT/JHIU
   

   ʙϑϩϯτΤϯυϑϨʔϜϫʔΫಛू
   

   

   !@@TBLJUP@@
   

   αΠϘ΢ζגࣜձࣾ%FTJHO5FDIOPMPHJTU
   

   View Slide

2. ࣗݾ঺հ
   w 4BLJUP !@@TBLJUP@@
   
   w %FTJHO5FDIOPMPHJTU
   w αΠϘ΢ζגࣜձࣾ
   w LJOUPOF%FTJHO5FBN
   w %FTJHO4ZTUFN࡞ͬͯ·͢
   

   View Slide

3. ࠓ೔࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ
   w ࿩͢͜ͱ
   w 3FBDUपลϥΠϒϥϦͷ࠷৽৘ใͱ͔ަ͑ͭͭɺίϯϙʔωϯτςε
   τख๏ͷ͋Ε͜Ε
   

   w ࿩͞ͳ͍͜ͱ
   w 6OJU5FTU *OUFHSBUJPO5FTU &&5FTUͷઆ໌
   w ςετͷઃܭํ๏
   w ৄ͍࣮͠૷ํ๏
   

   View Slide

4. 3FBDU5FTUJOH-JCSBSZ
   

   View Slide

5. 3FBDU5FTUJOH-JCSBSZ֓ཁ
   w 3FBDUͷίϯϙʔωϯτςετΛॻ͘ϥΠϒϥϦ
   w +FTU΍7JUFTUͳͲͷςετϥϯφʔΛ࢖ͬͯKTEPN্Ͱಈ͘
   w ςετϥϯφʔΛ࢖༻͠ͳͯ͘΋͍͍
   w KTEPNΛ࢖͍ɺ/PEFKT্ͰΤϛϡϨʔτ͢ΔͷͰϒϥ΢β্Ͱ࠶ݱ͢Δ
   ΑΓ࣮ߦಈ࡞͕ૣ͍
   w FTMJOUQMVHJOUFTUJOHMJCSBSZ΋͋Γ·͢
   

   View Slide

6. 3FBDU5FTUJOH-JCSBSZBZ
   w %0.औಘ͢Δํ๏ΛHFU#Z3PMF༏ઌʹ͢Δ͜ͱͰɺBZΛ୲อͭͭ͠
   ςετΛॻ͘͜ͱ͕Ͱ͖Δ
   w ஫ҙɿ͢΂ͯͷ৔߹ʹ౰ͯ͸·ΔΘ͚Ͱ͸ͳ͍ͷͰɺެࣜυΩϡϝϯτͷ
   1SJPSJUZͷ߲ΛݟΔͷ͕͓͢͢Ί
   w IUUQTUFTUJOHMJCSBSZDPNEPDTRVFSJFTBCPVUQSJPSJUZ
   

   View Slide

7. 3FBDU5FTUJOH-JCSBSZW
   w 3FBDUWʹ߹ΘͤͨλΠϛϯάͰϦϦʔε͞Εͨ ೥݄ࠒ
   
   w 3FBDUWҎ߱ͷαϙʔτ͕੾Εͨ
   w 3FBDU)PPLT୯ମΛςετ͢ΔSFOEFS)PPLؔ਺͕௥Ճ͞Εͨ
   

   View Slide

8. $ZQSFTT 1MBZXSJHIU
   

   View Slide

9. $ZQSFTT 1MBZXSJHIU
   w ϒϥ΢β্Ͱಈ͔͢ςετπʔϧ
   w ίϯϙʔωϯτ୯ମͰͷςετ͕Ͱ͖ΔΑ͏ʹͳ͖͍ͬͯͯΔ
   w $ZQSFTT͸೥݄ʹϦϦʔε͞ΕͨWͰCFUBͱͯ͠࢖༻Ͱ͖Δ
   w 1MBZXSJHIU͸೥݄ʹϦϦʔε͞ΕͨWͰ
   

   &YQFSJNFOUBMͱͯ͠࢖༻Ͱ͖Δ
   w αʔόʔαΠυͱ߹ΘͤͨςετΛ͢Δ&&༻ͷ5FTUϑϨʔϜϫʔΫͰ͸
   ͳ͘ɺ୯ʹϒϥ΢β্Ͱ࣮ߦͰ͖ΔϑϨʔϜϫʔΫͱͯ͠ͷ໾ׂ΋
   

   View Slide

10. $ZQSFTT 1MBZXSJHIU
    Ҿ༻ݩɿ"OOPVODJOH$ZQSFTTXJUI$PNQPOFOU5FTUJOH#FUB
    

    IUUQTDZQSFTTJPCMPHDZQSFTTSFMFBTF
    

    View Slide

11. KTEPN /PEFKT
    ͱϒϥ΢β্Ͱ࣮ߦ͢Δҧ͍
    w ࣮ߦ؀ڥ͕ҧ͏
    w KTEPN /PEFKT
    3FBDU5FTUJOH-JCSBSZ
    w ϒϥ΢β$ZQSFTT 1MBZXSJHIU
    w KTEPN͸ϨΠΞ΢τॾʑʹؔ͢Δ"1*͕࢖͑ͳ͍
    w جຊతͳίϯϙʔωϯτͷػೳςετ͸3FBDU5FTUJOH-JCSBSZ
    w ϨΠΞ΢τͳͲʹؔΘΔػೳ͸$ZQSFTT΍1MBZXSJHIUΛ࢖͏
    w .PDL͕ͳ͘ͳΔ͜ͱͰςετͷ৴པ౓͕͋Γɺίʔυͷ؆ུʹͳΔ
    

    View Slide

12. 4UPSZCPPLͷ׆༻
    

    View Slide

13. 4UPSZCPPL֓ཁ
    w ίϯϙʔωϯτຖͷඳըͳͲ͕Ͱ͖Δ044
    w ίϯϙʔωϯτΧλϩάͱͯ͠ͷΠϝʔδ͕ڧ͍͔΋͠Εͳ͍͕ɺ
    4UPSZCPPL্Ͱ֤ίϯϙʔωϯτ 4UPSZ
    ͷςετ͕ߦ͑ΔΑ͏ʹͳͬͨ
    w 4UPSZCPPLνʔϜ͕։ൃ͍ͯ͠Δ$ISPNBUJDΛ࢖͏͜ͱͰɺ
    

    ͞ΒʹศརʹͳΔ
    

    View Slide

14. 4UPSZCPPL!TUPSZCPPLUFTUJOHSFBDU
    w 4UPSZCPPL্ʹఆٛͨͭͭ͠ͷ4UPSZΛ࢖༻ͯ͠ɺ
    

    ίϯϙʔωϯτ͕Ͱ͖Δ
    w 4UPSZͰঢ়ଶͳͲ͸ݟ͑ΔΑ͏ʹ͍ͯ͠ΔͷͰɺ
    

    ͦΕʹରͯ͠ςετ͢Δ͜ͱ͕Ͱ͖Δ
    w !TUPSZCPPLUFTUJOHMJCSBSZͱҰॹʹ࢖༻͢Δ
    w 4UPSZUFTUJOHMJCSBSZ
    

    View Slide

15. 4UPSZCPPL!TUPSZCPPLUFTUJOHSFBDU
    

    View Slide

16. 4UPSZCPPL*OUFSBDUJPO5FTUJOH
    w 4UPSZCPPL্Ͱಈ࡞Λ࠶ݱͰ͖Δςετ
    w !TUPSZCPPLUFTUJOHMJCSBSZͱ!TUPSZCPPLBEEPOJOUFSBDUJPOTΛ
    ࢖༻͢Δ
    w QMBZؔ਺Λ࢖͏
    w 'PDVT "DUJWFঢ়ଶͷ֬ೝ΍ෳࡶͳίϯϙʔωϯτͷಈ࡞Λ࠶ݱ͢Δ͜ͱ
    Ͱɺίϯϙʔωϯτͷ࢓༷͕෼͔ΔΑ͏ʹͳΔ
    

    View Slide

17. 4UPSZCPPL*OUFSBDUJPO5FTUJOH
    

    View Slide

18. 4UPSZCPPL*OUFSBDUJPO5FTUJOH
    Ҿ༻ݩɿ4UPSZCPPL*OUFSBDUJPOUFTUT
    

    IUUQTTUPSZCPPLKTPSHEPDTSFBDUXSJUJOHUFTUTJOUFSBDUJPOUFTUJOH
    

    View Slide

19. 4UPSZCPPL!TUPSZCPPLUFTUSVOOFS
    w 4UPSZCPPL্ͷίϯϙʔωϯτςετΛOQNTDUJQUͰಈ͔͢
    w $*Ͱ΋ಈ͔͢͜ͱ͕Ͱ͖Δ
    w +FTUͱ1MBZXSJHIUͰಈ͘
    w *OUFSBDUJPO5FTU 1MBZؔ਺
    ͕͋Δ΋ͷ͸ɺ*OUFSBDUJPO5FTU͕௨Βͳ͚
    Ε͹མͪΔ
    w *OUFSBDUJPO5FTU͕ͳ͍΋ͷ͸4UPSZ͕ϨϯμϦϯάͰ͖Δ͔ݕূ͞ΕΔ
    ͷͰɺ4NPLF5FTUʹͳΔ
    

    View Slide

20. ͦͷ΄͔
    w ͕࣌ؒͳׂͯ͘Ѫͨ͠΋ͷୡ
    w 4UPSZCPPL$ISPNBUJDPSSFHTVJU4UPSZDBQΛ༻͍ͨ
    

    7JTVBM3FHSFTTJPO5FTUJOH
    w "YFΛ࢖༻ͨ͠BZ5FTU
    w KFTUBYF
    w "YF1MBZXSJHIU
    

    View Slide

21. ·ͱΊ
    w ίϯϙʔωϯτΛςετ͢Δํ๏͸༷ʑ͋Δ
    w ςετͷखࡳ͕ଟ͍΄Ͳɺςετઃܭͷ؍఺Λ૿΍͢͜ͱ͕Ͱ͖Δ
    w ίϯϙʔωϯτ΍ΞϓϦέʔγϣϯͷੑ࣭ɺঢ়گʹ߹Θͤͯ࢖͓͏
    

    View Slide

22. ͓ΘΓ
    

    View Slide