頑張りすぎないVue.js単体テストのススメ / Vue.js unit testing that does not work too hard

2019/10/24 STORES.jp Meetup for Front-end Engineers #1で発表した内容です。

Transcript

1. ,PTVLF
   :BNBTIJUB 4503&4KQ
   JOD
   
   IFZ
   JOD
   4503&4KQ
   .FFUVQ
   GPS
   'SPOUFOE
   &OHJOFFST
    ؤுΓ͗͢ͳ͍7VFKT୯ମςετͷεεϝ
2. ࣗݾ঺հ ɾࢁԼޭհ ɾ4503&4KQ
   6*վળνʔϜ ɾ೥݄ೖࣾ ɾલ৬͸ϕτφϜͷελʔτΞοϓ ɹͰ3FBDUϝΠϯ !LTLZNTU
3. 
   
   ୯ମςετॻ͍ͯ·͔͢ʁ
4. ετΞσβΠϯ ϦϒϥϯσΟϯά ՝ۚϖʔδ ૿੫ରԠ ׂൢ๏ରԠ 6*
   $PNQPOFOU ΞΠςϜ࡞੒ฤू ೥݄ ೥ ݱࡏ 5FTUJOH
   4UBSU Ҡߦ։࢝ ˞1+͸Ұ෦ൈਮ
5. ֤ݸਓؤுͬͯਐΊ͍͕ͯͨɻɻ ςετํ਑ΛܾΊͯޮՌతͳςετΛ ؤுΓ͗ͣ͢ॻ͖͍ͨ ςετཻ౓ͷෆἧ͍׌ͭɺޮՌతͰͳ͍ςετ ɾ
   Ϧιʔεͷফ໣ ɾ
   ϝϯςφϯείετ ɾ
   εϓϦϯτ௨Γʹਐ·ͳ͍JTTVF ɾ
   ਫ਼ਆతͳਏΈ ! "
6. ͦ͜Ͱࠓ೔͸4503&4͕ςετͱ ޲͖߹ͬͨ݁Ռʹ͍͓ͭͯ࿩͠·͢
7. ˞ิ଍
8. 4503&4KQͰ͸ओʹͭͷϦϙδτϦͰ /VYU
   º
   +FTUΛத৺ʹςετ؀ڥΛߏங .BJO 6*
   $PNQPOFOU
   -JCSBSZ
9. /VYU WVFUFTUVUJMT
   º
   +FTUͰͷ͓࿩͕ϝΠϯ .BJO 6*
   $PNQPOFOU
   -JCSBSZ
10. "HFOEB 
    ໨తΛܾΊΔʢXIZʣ 
    ςετର৅ΛܾΊΔʢXIBUʣ 
    Ͳ͏ςετ͢Δͷ͔ IPX 
    ͜Ε͔Β
11. "HFOEB 
    ໨తΛܾΊΔʢXIZʣ 
    ςετର৅ΛܾΊΔʢXIBUʣ 
    Ͳ͏ςετ͢Δͷ͔ IPX 
    ͜Ε͔Β
12. ςετΛॻ͘໨త ɾਫ਼ਆత҆ఆ ɾखಈςετͷίετͷ࡟ݮ ɾϦϑΝΫλϦϯά࣌ͷΤϯόάΛݮΒ͢ ɾίϯϙʔωϯτͷ࢓༷ॻత໾ׂ
13. "HFOEB 
    ໨తΛܾΊΔʢXIZʣ 
    ςετର৅ΛܾΊΔʢXIBUʣ 
    Ͳ͏ςετ͢Δͷ͔ IPX 
    ͜Ε͔Β
14. ςετର৅ ɾQBHFT
    
    ⚪
    1$
    
    ⚪
    41 ɾDPNQPOFOUT
    
    ⚪
    NJYJO
    
    ⚪
    DPOUBJOFS
    
    ⚪
    QSFTFOUBUJPOBM ɾMBZPVUT ɾTUPSF ɾVUJMT ɾDPOTUBOUT ɾQMVHJOT ɾNJEEMFXBSF
15. ςετ಺༰ ɾNPVOU ɾQSPQT ɾDPNQVUFE ɾNFUIPET
    
    ⚪
    FNJU
    
    ⚪
    IUUQ
    3FRVFTU ɾUFNQMBUF
    
    ⚪
    TMPU
    
    ⚪
    WJG
    
    WTIPX
    
    ⚪
    WPO
    
    ⚪
    WCJOE
    DMBTT
    
    ⚪
    WCJOE
    BUUS ɾMJGFDZDMF ɾNJYJO ɾBTZOD%BUBGFUDI ɾHFUUFST ɾNVUBUJPOT ɾBDUJPOT
16. ൣғ͸޿͍
    !
17. ޮՌతɺޮՌͷബ͍ςετΛఆٛͯ͠ ॻ͘ɺॻ͔ͳ͍Λ໌֬ʹ͢Δ !
18. ޮՌͷബ͍ςετ ɾॳظදࣔঢ়ଶ ɾQSPQTͷఆٛ ɾ୯७ͳϩδοΫ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    FUD ෳࡶ౓ͷ௿͍ϩδοΫ͸ ॻ͔ͳ͍બ୒Λͨ͠ !
19. ॳظදࣔঢ়ଶ QSPQTͷUFNQMBUFදࣔͷΈ
20. QSPQTͷఆٛ QSPQTఆٛʹରͯ͠ͷςετ
21. ୯७ͳϩδοΫ
    FYNVUBUJPOT ୯७ͳTUBUFมߋͷNVUBUJPO ͦͷଞFNJUΛൃՐ͢Δ͚ͩͷNFUIPETͳͲ
22. ޮՌతͳςετ ɾυϝΠϯͰͷίΞͳϩδοΫ ɾ෼ذͷೖΔϩδοΫ ෳࡶ౓ͷߴ͍ϩδοΫ͸ ͔ͬ͠Γͱ཈͑Δ !
23. υϝΠϯͰͷίΞͳ߲໨Λఆٛ͢Δ
24. ྫ͑͹͜͏͍ͬͨ ༗ྉձһొ࿥ϑΥʔϜͷ৔߹ ίΞͳςετ߲໨Λఆٛ
25. ༗ྉձһొ࿥ϑΥʔϜ ͷ৔߹ ᶃ ᶄ ᶆ ᶅ ᶄ
    ֹ͕ۚਖ਼͘͠දࣔ͞Ε͍ͯΔࣄ ᶃʮ͓ࢧ෷ํ๏ʯʹΑͬͯ
    
    
    
    
    ϑΥʔϜ಺༰͕มΘΔࣄ ᶅ
    όϦσʔγϣϯ͕ਖ਼͘͠ಈ࡞ɺ
    
    
    
    දࣔ͞ΕΔࣄ ᶆ
    ϑΥʔϜͷೖྗ಺༰Ͱ"1*͕
    
    
    
    ୟ͔ΕΔࣄ
26. ෼ذͷೖΔϩδοΫ ಛఆ৚݅ɺΠϕϯτʹΑͬͯڍಈ͕ มΘΓόάʹͳΓ΍͍͢
27. "HFOEB 
    ໨తΛܾΊΔʢXIZʣ 
    ςετର৅ΛܾΊΔʢXIBUʣ 
    Ͳ͏ςετ͢Δͷ͔ IPX 
    ͜Ε͔Β
28. Ͳ͏ςετ͢Δͷ͔ ɾQBHFTͰͷ౷߹ςετ ɾTUPSF͸GBDUPSZؔ਺Ͱڞ௨Խ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ʜFUD ಉ஋Ϋϥεςετɺڥք஋ςετͷΑ͏ͳςετٕ๏ ͸΋ͪΖΜͰ͕͢ɺ΋ͬͱ7VF
    º
    +FTUଆͷ࿩
29. QBHFTͰͷ౷߹ςετ QBHFT͔ΒNPVOUͰ౷߹ςετ σʔλͷྲྀΕΛ͔ͬ͠Γ௨͍ͬͯΔ͔νΣοΫ ˞ଞίϯϙʔωϯτ͸جຊతʹ͸TIBMMPX.PVOUͰ੹຿Λด͡ࠐΊΔ 1BSFOU $IJME (SBOEDIJME mount
30. ͦͷࡍXBSOJOHͰ΋GBJMʹ͢Δ jestSetup.js XBSOJOH͕ग़΍͘͢ɺग़ͯ΋ςετࣗମ͸௨ͬͯ͠·͏ҝ XBSOJOHͰ΋GBJM͢Δ༷ʹ͓ͯ͘͠ͱΑΓָͰ҆৺ jest.config.js
31. TUPSF͸GBDUPSZؔ਺Ͱڞ௨Խ ڞ௨Խ͢Δ͜ͱͰେ෯ʹָʹ
32. ͜ͷଞʹ΋·ͩ·ͩ͋Δ !EFYJB
    ͕ࣾ಺2JJUBʹ߲໨ͷ σβΠϯύλʔϯɺΞϯνύλʔϯ Λ·ͱΊͯ͘Ε͍ͯΔ ࣮૷࣌ͷ໎͍͕ফ͑ϨϏϡϫʔ ͱ΋ڞ௨ݴޠͰձ࿩Ͱ͖ΔΑ͏ʹ ͳΔ ৄ͍͠಺༰͸·ͨͲ͔͜Ͱ࿩ͤͨΒ !
33. "HFOEB 
    ໨తΛܾΊΔʢXIZʣ 
    ςετର৅ΛܾΊΔʢXIBUʣ 
    Ͳ͏ςετ͢Δͷ͔ IPX 
    ͜Ε͔Β
34. ͜Ε͔Β WJGͳͲͷදࣔ෼ذʹؔͯ͠͸&&ಋೖͳͲ ࢼͯ͠Έ͍ͨɺྑͦ͞͏Ͱ͋Ε͹୯ମςετ ͷ಺༰Λ&&دͤΒΕΔͷͰ͸ͳ͍͔ʁ ͳΜͯ࿩Λ͍ͯ͠·͢
35. ؤுΓ͗ͣ͢ϝϯς͠΍͍͢ ςετΛ͜Ε͔Β΋໨ࢦ͍ͯ͘͠ !
37. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !
38. IUUQTIFZKQFWFOUTIFMMPIFZ ୈೋɾୈ࢛
    ໦༵
    ʙ