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

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

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

610195d9ffdba3c9cddaa9fd87753284?s=128

Kosuke Yamashita

October 24, 2019
Tweet

Transcript

  1. ,PTVLF:BNBTIJUB 4503&4KQ JODIFZ JOD 4503&4KQ.FFUVQGPS'SPOUFOE&OHJOFFST ؤுΓ͗͢ͳ͍7VFKT୯ମςετͷεεϝ

  2. ࣗݾ঺հ ɾࢁԼޭհ ɾ4503&4KQ6*վળνʔϜ ɾ೥݄ೖࣾ ɾલ৬͸ϕτφϜͷελʔτΞοϓ ɹͰ3FBDUϝΠϯ !LTLZNTU

  3. ୯ମςετॻ͍ͯ·͔͢ʁ

  4. ετΞσβΠϯ ϦϒϥϯσΟϯά ՝ۚϖʔδ ૿੫ରԠ ׂൢ๏ରԠ 6*$PNQPOFOU ΞΠςϜ࡞੒ฤू ೥݄ ೥ ݱࡏ

    5FTUJOH4UBSU Ҡߦ։࢝ ˞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 ⚪IUUQ3FRVFTU ɾUFNQMBUF ⚪TMPU ⚪WJGWTIPX

    ⚪WPO ⚪WCJOEDMBTT ⚪WCJOEBUUS ɾ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. ؤுΓ͗ͣ͢ϝϯς͠΍͍͢ ςετΛ͜Ε͔Β΋໨ࢦ͍ͯ͘͠ !

  36. None
  37. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !

  38. IUUQTIFZKQFWFOUTIFMMPIFZ ୈೋɾୈ࢛໦༵ʙ