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@@ 
 αΠϘ΢ζגࣜձࣾ
   %FTJHO
   5FDIOPMPHJTU
2. ࣗݾ঺հ w 4BLJUP
   !@@TBLJUP@@
   w %FTJHO
   5FDIOPMPHJTU
   w αΠϘ΢ζגࣜձࣾ
   w LJOUPOF
   
   %FTJHO
   5FBN
   w %FTJHO
   4ZTUFN
   ࡞ͬͯ·͢
3. ࠓ೔࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ w ࿩͢͜ͱ
   w 3FBDU
   पลϥΠϒϥϦͷ࠷৽৘ใͱ͔ަ͑ͭͭɺίϯϙʔωϯτςε τख๏ͷ͋Ε͜Ε 
 w ࿩͞ͳ͍͜ͱ
   w 6OJU
   5FTU
   *OUFHSBUJPO
   5FTU
   &&
   5FTU
   ͷઆ໌
   w ςετͷઃܭํ๏
   w ৄ͍࣮͠૷ํ๏
4. 3FBDU
   5FTUJOH
   -JCSBSZ
5. 3FBDU
   5FTUJOH
   -JCSBSZ
   
   ֓ཁ w 3FBDU
   ͷίϯϙʔωϯτςετΛॻ͘ϥΠϒϥϦ
   w +FTU
   ΍
   7JUFTU
   ͳͲͷςετϥϯφʔΛ࢖ͬͯ
   KTEPN
   ্Ͱಈ͘
   w ςετϥϯφʔΛ࢖༻͠ͳͯ͘΋͍͍
   w KTEPN
   Λ࢖͍ɺ/PEFKT
   ্ͰΤϛϡϨʔτ͢ΔͷͰϒϥ΢β্Ͱ࠶ݱ͢Δ ΑΓ࣮ߦಈ࡞͕ૣ͍
   w FTMJOUQMVHJOUFTUJOHMJCSBSZ
   ΋͋Γ·͢
6. 3FBDU
   5FTUJOH
   -JCSBSZ
   
   BZ w %0.
   औಘ͢Δํ๏Λ
   HFU#Z3PMF
   ༏ઌʹ͢Δ͜ͱͰɺBZ
   Λ୲อͭͭ͠ ςετΛॻ͘͜ͱ͕Ͱ͖Δ
   w ஫ҙɿ͢΂ͯͷ৔߹ʹ౰ͯ͸·ΔΘ͚Ͱ͸ͳ͍ͷͰɺެࣜυΩϡϝϯτͷ 1SJPSJUZͷ߲ΛݟΔͷ͕͓͢͢Ί
   w IUUQTUFTUJOHMJCSBSZDPNEPDTRVFSJFTBCPVUQSJPSJUZ
7. 3FBDU
   5FTUJOH
   -JCSBSZ
   
   W w 3FBDU
   W
   ʹ߹ΘͤͨλΠϛϯάͰϦϦʔε͞Εͨ ೥݄ࠒ
   w 3FBDU
   W
   Ҏ߱ͷαϙʔτ͕੾Εͨ
   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
    $ZQSFTT
    
    XJUI
    $PNQPOFOU
    5FTUJOH
    #FUB 
 IUUQTDZQSFTTJPCMPHDZQSFTTSFMFBTF
11. KTEPN
    /PEFKT ͱϒϥ΢β্Ͱ࣮ߦ͢Δҧ͍ w ࣮ߦ؀ڥ͕ҧ͏
    w KTEPN
    /PEFKT
    
    3FBDU
    5FTUJOH
    -JCSBSZ
    w ϒϥ΢β
    
    $ZQSFTT
    1MBZXSJHIU
    w KTEPN
    ͸
    ϨΠΞ΢τॾʑʹؔ͢Δ
    "1*
    ͕࢖͑ͳ͍
    w جຊతͳίϯϙʔωϯτͷػೳςετ͸
    3FBDU
    5FTUJOH
    -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
    
    *OUFSBDUJPO
    5FTUJOH w 4UPSZCPPL
    ্Ͱಈ࡞Λ࠶ݱͰ͖Δςετ
    w !TUPSZCPPLUFTUJOHMJCSBSZ
    ͱ
    !TUPSZCPPLBEEPOJOUFSBDUJPOT
    Λ ࢖༻͢Δ
    w QMBZ
    ؔ਺Λ࢖͏
    w 'PDVT
    "DUJWFঢ়ଶͷ֬ೝ΍ෳࡶͳίϯϙʔωϯτͷಈ࡞Λ࠶ݱ͢Δ͜ͱ Ͱɺίϯϙʔωϯτͷ࢓༷͕෼͔ΔΑ͏ʹͳΔ
17. 4UPSZCPPL
    
    *OUFSBDUJPO
    5FTUJOH
18. 4UPSZCPPL
    
    *OUFSBDUJPO
    5FTUJOH Ҿ༻ݩɿ4UPSZCPPL
    
    *OUFSBDUJPO
    UFTUT 
 IUUQTTUPSZCPPLKTPSHEPDTSFBDUXSJUJOHUFTUTJOUFSBDUJPOUFTUJOH
19. 4UPSZCPPL
    
    !TUPSZCPPLUFTUSVOOFS w 4UPSZCPPL্ͷίϯϙʔωϯτςετΛOQN
    TDUJQUͰಈ͔͢
    w $*
    Ͱ΋ಈ͔͢͜ͱ͕Ͱ͖Δ
    w +FTU
    ͱ
    1MBZXSJHIU
    Ͱಈ͘
    w *OUFSBDUJPO
    5FTU
    1MBZ
    ؔ਺ ͕͋Δ΋ͷ͸ɺ*OUFSBDUJPO
    5FTU
    ͕௨Βͳ͚ Ε͹མͪΔ
    w *OUFSBDUJPO
    5FTU
    ͕ͳ͍΋ͷ͸
    4UPSZ
    ͕ϨϯμϦϯάͰ͖Δ͔ݕূ͞ΕΔ ͷͰɺ4NPLF
    5FTU
    ʹͳΔ
20. ͦͷ΄͔ w ͕࣌ؒͳׂͯ͘Ѫͨ͠΋ͷୡ
    w 4UPSZCPPL
    
    $ISPNBUJD
    PS
    SFHTVJU
    
    4UPSZDBQ
    Λ༻͍ͨ
    
 7JTVBM
    3FHSFTTJPO
    5FTUJOH
    w "YF
    Λ࢖༻ͨ͠
    BZ
    5FTU
    w KFTUBYF
    w "YF1MBZXSJHIU
21. ·ͱΊ w ίϯϙʔωϯτΛςετ͢Δํ๏͸༷ʑ͋Δ
    w ςετͷखࡳ͕ଟ͍΄Ͳɺςετઃܭͷ؍఺Λ૿΍͢͜ͱ͕Ͱ͖Δ
    w ίϯϙʔωϯτ΍ΞϓϦέʔγϣϯͷੑ࣭ɺঢ়گʹ߹Θͤͯ࢖͓͏
22. ͓ΘΓ