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

    View full-size slide

  2. ࣗݾ঺հ
    w 4BLJUP !@@TBLJUP@@

    w %FTJHO5FDIOPMPHJTU
    w αΠϘ΢ζגࣜձࣾ
    w LJOUPOF%FTJHO5FBN
    w %FTJHO4ZTUFN࡞ͬͯ·͢

    View full-size slide

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

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

    View full-size slide

  4. 3FBDU5FTUJOH-JCSBSZ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 3FBDU5FTUJOH-JCSBSZW
    w 3FBDUWʹ߹ΘͤͨλΠϛϯάͰϦϦʔε͞Εͨ ೥݄ࠒ

    w 3FBDUWҎ߱ͷαϙʔτ͕੾Εͨ
    w 3FBDU)PPLT୯ମΛςετ͢ΔSFOEFS)PPLؔ਺͕௥Ճ͞Εͨ

    View full-size slide

  8. $ZQSFTT 1MBZXSJHIU

    View full-size slide

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

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

    View full-size slide

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

    IUUQTDZQSFTTJPCMPHDZQSFTTSFMFBTF

    View full-size 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 full-size slide

  12. 4UPSZCPPLͷ׆༻

    View full-size slide

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

    ͞ΒʹศརʹͳΔ

    View full-size slide

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

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

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

    View full-size slide

  15. 4UPSZCPPL!TUPSZCPPLUFTUJOHSFBDU

    View full-size slide

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

    View full-size slide

  17. 4UPSZCPPL*OUFSBDUJPO5FTUJOH

    View full-size slide

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

    IUUQTTUPSZCPPLKTPSHEPDTSFBDUXSJUJOHUFTUTJOUFSBDUJPOUFTUJOH

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide