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

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

sakito
August 17, 2022

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

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

Twitter
https://twitter.com/__sakito__

sakito

August 17, 2022
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

  1. 3FBDUίϯϙʔωϯτʹ͓͚Δ 
 ςετख๏ͷબ୒ࢶ 5FDI'FFE&YQFSUT/JHIU 
 ʙϑϩϯτΤϯυϑϨʔϜϫʔΫಛू 
 
 !@@TBLJUP@@ 


    αΠϘ΢ζגࣜձࣾ%FTJHO5FDIOPMPHJTU
  2. ࣗݾ঺հ w 4BLJUP !@@TBLJUP@@  w %FTJHO5FDIOPMPHJTU w αΠϘ΢ζגࣜձࣾ w

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

    6OJU5FTU *OUFHSBUJPO5FTU &&5FTUͷઆ໌ w ςετͷઃܭํ๏ w ৄ͍࣮͠૷ํ๏
  4. 3FBDU5FTUJOH-JCSBSZ

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

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

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

  8. $ZQSFTT 1MBZXSJHIU

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

    
 &YQFSJNFOUBMͱͯ͠࢖༻Ͱ͖Δ w αʔόʔαΠυͱ߹ΘͤͨςετΛ͢Δ&&༻ͷ5FTUϑϨʔϜϫʔΫͰ͸ ͳ͘ɺ୯ʹϒϥ΢β্Ͱ࣮ߦͰ͖ΔϑϨʔϜϫʔΫͱͯ͠ͷ໾ׂ΋
  10. $ZQSFTT 1MBZXSJHIU Ҿ༻ݩɿ"OOPVODJOH$ZQSFTTXJUI$PNQPOFOU5FTUJOH#FUB 
 IUUQTDZQSFTTJPCMPHDZQSFTTSFMFBTF

  11. KTEPN /PEFKT ͱϒϥ΢β্Ͱ࣮ߦ͢Δҧ͍ w ࣮ߦ؀ڥ͕ҧ͏ w KTEPN /PEFKT 3FBDU5FTUJOH-JCSBSZ w

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

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

    
 ͞ΒʹศརʹͳΔ
  14. 4UPSZCPPL!TUPSZCPPLUFTUJOHSFBDU w 4UPSZCPPL্ʹఆٛͨͭͭ͠ͷ4UPSZΛ࢖༻ͯ͠ɺ 
 ίϯϙʔωϯτ͕Ͱ͖Δ w 4UPSZͰঢ়ଶͳͲ͸ݟ͑ΔΑ͏ʹ͍ͯ͠ΔͷͰɺ 
 ͦΕʹରͯ͠ςετ͢Δ͜ͱ͕Ͱ͖Δ w

    !TUPSZCPPLUFTUJOHMJCSBSZͱҰॹʹ࢖༻͢Δ w 4UPSZ UFTUJOHMJCSBSZ
  15. 4UPSZCPPL!TUPSZCPPLUFTUJOHSFBDU

  16. 4UPSZCPPL*OUFSBDUJPO5FTUJOH w 4UPSZCPPL্Ͱಈ࡞Λ࠶ݱͰ͖Δςετ w !TUPSZCPPLUFTUJOHMJCSBSZͱ!TUPSZCPPLBEEPOJOUFSBDUJPOTΛ ࢖༻͢Δ w QMBZؔ਺Λ࢖͏ w 'PDVT

    "DUJWFঢ়ଶͷ֬ೝ΍ෳࡶͳίϯϙʔωϯτͷಈ࡞Λ࠶ݱ͢Δ͜ͱ Ͱɺίϯϙʔωϯτͷ࢓༷͕෼͔ΔΑ͏ʹͳΔ
  17. 4UPSZCPPL*OUFSBDUJPO5FTUJOH

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

  19. 4UPSZCPPL!TUPSZCPPLUFTUSVOOFS w 4UPSZCPPL্ͷίϯϙʔωϯτςετΛOQNTDUJQUͰಈ͔͢ w $*Ͱ΋ಈ͔͢͜ͱ͕Ͱ͖Δ w +FTUͱ1MBZXSJHIUͰಈ͘ w *OUFSBDUJPO5FTU 1MBZؔ਺

    ͕͋Δ΋ͷ͸ɺ*OUFSBDUJPO5FTU͕௨Βͳ͚ Ε͹མͪΔ w *OUFSBDUJPO5FTU͕ͳ͍΋ͷ͸4UPSZ͕ϨϯμϦϯάͰ͖Δ͔ݕূ͞ΕΔ ͷͰɺ4NPLF5FTUʹͳΔ
  20. ͦͷ΄͔ w ͕࣌ؒͳׂͯ͘Ѫͨ͠΋ͷୡ w 4UPSZCPPL $ISPNBUJDPSSFHTVJU 4UPSZDBQΛ༻͍ͨ 
 7JTVBM3FHSFTTJPO5FTUJOH w

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

  22. ͓ΘΓ