νʔϜͰऔΓΉςετվળͷ͋ΏΈ2021.09.08 Wed. Midas Tech Study #2@negiandleekSmartHR ϓϩμΫτΤϯδχΞ
View Slide
ࠜ؛ ༐SmartHR ϓϩμΫτΤϯδχΞʗSmartHR ຊମʗओʹWebϑϩϯτΤϯυʢReact + TypeScriptʣ● 20209݄SmartHRೖࣾ● SmartHRຊମͰݱࡏओʹ༧ػೳͷ։ൃΛߦͳ͍ͬͯΔ● ւ͕͖ͳͷͰւ͕͍ۙͱ͜ΖʹҾͬӽͨ͠@negiandleek
લఏ
- νʔϜߏ- ΤϯδχΞ5ਓ- ϑϩϯτΤϯυ1ਓ- όοΫΤϯυ4ਓ- QA1ਓ- ։ൃLeSS(εΫϥϜͷେ͖͍൛)ͷϑϩʔʹԊͬͯΔ- εϓϦϯτظؒ1िؒ։ൃମ 🏢
Ұिؒͷ͍͍ͩͨͷྲྀΕ 📅ਫ ۚ ݄ ՐޕલՌͷϨϏϡʔ࣮࣮2"2"ޕޙ ܭը 2"
- SmartHRຊମʹϑϩϯτΤϯυͷνʔϜ͕ൃ͞Εͨͷ͕Ұલ- όοΫΤϯυଆʹϏδωεϩδοΫ͕ଟ͍- E2E(RSpec ͱCapybaraͰߏ͞Ε͍ͯΔςετ)ॻ͔Ε͍ͯΔ- όοΫΤϯυଆͷࣗಈςετ(Controller, Model, Request)݁ߏॻ͔ΕͯΔݱঢ়ͷςετ*ϓϥεΞϓϦͰϑϩϯτΤϯυͷνʔϜͬͱૣ͔͘Β݁͞Ε͍ͯ·͢
- ղ͢Δͱ…??- ςετ؍(ςετέʔε)ͷચ͍ग़͠- ςετ࣮ࢪQAͷλεΫΛཧ͢Δ
՝
՝࣮ޙͷQAෛՙ͕ߴ͘ͳΓ͕ͪ😭
- QAͷϦιʔε- ։ൃऀ:QA=5:1- ݄ͱՐʹQAλεΫ͕ଟ͘ൃੜ͢Δ- ςετઓུ͕ͳ͔ͬͨ- ࣗಈςετͱϚχϡΞϧςετͰॏෳͯ͠ΔՕॴ͕͋Δ- ࣗಈςετ͕Γͯͳ͍͜ͱଟʑ՝ͷৄࡉ*νʔϜᴈ໌ظͩͬͨͷͰ՝΄͔ʹΖΖ͋ͬͨ…
- QAͷϦιʔε- QA͕ࣗಈςετͰԿΛ୲อ͍ͯ͠Δͷ͔Βͣʹ͍Δ- QAͷλεΫ1िؒͷ͏ͪɺޙʹ͞ΒʹภΔ- ςετઓུ͕ͳ͔ͬͨ՝ͷੳ
- QAͷϦιʔε- QA͕ࣗಈςετͰԿΛ୲อ͍ͯ͠Δͷ͔Βͣʹ͍ΔͨΊɺςετ࣮ࢪͷ࣌ؒͷख͕ؒ૿͍͑ͯΔ- ͦͷͨΊɺQAͷλεΫ1िؒͷ͏ͪɺޙʹ͞ΒʹภΔ- ςετઓུ͕ͳ͔ͬͨ՝ͷੳQAͱΤϯδχΞͰςετ؍ʹ͍ͭͯڞ༗ͨ͠ΒղܾͰ͖ͦ͏🤔
ςετ؍ͷચ͍ग़͠ΛQAͱΤϯδχΞͰߦ͏←ཁૉͱঢ়ଶΛચ͍ग़ͯ͠ɺ←ͦΕΒΛΈ߹Θͤͯɺςετ؍Λग़͢
ࣗಈςετͷৼΓ͚ΛQAͱΤϯδχΞͰߦ͏←ࣗಈςετͰ୲อ͢Δͷͱɺ←ϚχϡΞϧςετͰߦ͏ͷΛɹ͖ͬΓͤ͞Δ
݁Ռ🎉- ϚχϡΞϧςετͷςετ࣮ࢪΛ࠷খݶͰߦ͑Δ- ςετ؍ग़͠ΛQAͱΤϯδχΞͰߦ͍ɺࣗಈςετʹৼΓ͚͍ͯΔͷͰ৴པੑ͕ΑΓߴ͘ͳΔ- ΤϯδχΞ͚ͩͰߦ͏ΑΓɺ҆৺ײ͕͋Δ*QAࢹͷ͓ҎԼͷςοΫϒϩάʹৄ͘͠ॻ͍ͯ͋Γ·͢https://tech.smarthr.jp/entry/2021/08/27/171310
- QAͷϦιʔε- ςετઓུ͕ͳ͔ͬͨ- ΤϯδχΞͱQAͰڞ௨ͷೝࣝΛ࣋ͯͯͳ͍- ϑϩϯτΤϯυͷUIςετԿΛΔͷ͔ܾ·ͬͯͳ͔ͬͨ՝ͷੳ
ςετઓུ͕ඞཁͳͷ͔νʔϜͰ͠߹ͬͨ- ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ- ςετ࣮ࢪͷίετΛݮΒͤΔ- ࣗಈςετΛ৴པੑΛΑΓߴ͍ͷʹ͍ͯ͘͠- ςετํ͕໌֬Ͱͳ͍ͱɺςετ؍(ςετέʔε)͕ϒϨΔ
ςετઓུ͕ඞཁͳͷ͔νʔϜͰ͠߹ͬͨ- ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ- ςετ࣮ࢪͷίετΛݮΒͤΔ- ࣗಈςετΛ৴པੑΛΑΓߴ͍ͷʹ͍ͯ͘͠- ςετํ͕໌֬Ͱͳ͍ͱɺςετ؍(ςετέʔε)͕ϒϨΔ೦ͷҝཧͱݱঢ়ͷΪϟοϓʹؾͮ͘😭
ݱঢ়ͷςετϐϥϛου- ϑϩϯτΤϯυͷUIςετϚχϡΞϧςετͱE2Eςετ- ςετ؍ΛࣗಈςετʹৼΓ͚ΔΑ͏ʹͳΓࣗಈςετͷίετ͕૿͑ͨҾ༻:alisterbscott.com
ཧͷςετϐϥϛουʹ͚ۙͮΔ- E2EͷίετΛԼ͛ΔͨΊʹɺJest Integration TestΛಋೖͨ͠- ϖʔδΛؙ͝ͱϨϯμϦϯά͢Δςετ- E2EͱॏͳΔ෦͋ΔͷͰɺϧʔϧΛ໌֬ʹ͠ɺ͍͍͢ڥʹͨ͠Ҿ༻:alisterbscott.comҾ༻:testingjavascript.com
Jest Integration Testͷڥඋ- JestͱReact Testing Library- MSW(Mock Service Worker)ͷಋೖ- Browser/Node྆ํͰ͑Δ- APIͷ࣮ͪͳ͘ͳΔͳͲͷϝϦοτ͋Δ- એݴతʹఆٛͰ͖ΔͷͰ͍͍͢
ϑϩϯτΤϯυςετ +FTU*OUFHSBUJPO5FTUͷڥඋ←Nodeڥ↓Browserڥ
ϑϩϯτΤϯυςετ +FTU*OUFHSBUJPO5FTUͷڥඋ↑Mockαϯϓϧˠ
Jest Integration TestͱE2EͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND)- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)- E2E- ϚχϡΞϧςετ
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND)- First Fetch(ϖʔδͷॳճදࣔ)Ͱ݁͢ΔͷJest Integration Test- ύλʔϯ͕ෳ͋Δ߹ɺϋοϐʔύεΛE2EͰߦ͍ɺΓͷόϦΤʔγϣϯJestͰ୲อ͢Δ- Ϣʔβʔૢ࡞͕͏͕ɺRequest͕ൃੜ͠ͳ͍ͷJest Integration Test- όϦσʔγϣϯϘλϯͷDisabledଐੑ- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)- E2E- ϚχϡΞϧςετ
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND)- First Fetch(ϖʔδͷॳճදࣔ)Ͱ݁͢ΔͷJest Integration Test
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND)- Ϣʔβʔૢ࡞͕͏͕ɺRequest͕ൃੜ͠ͳ͍ͷJest Integration Test
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND)- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)- 400ܥ- E2EͰग़དྷͳ͍ͷ(ΠϨΪϡϥʔ͕ଟ͍ͷͰյΕͳ͍͜ͱͷ֬ೝ)- APIΛୟ͍ͨ࣌ͷRequest BodyͳͲͷΞαʔγϣϯ- ϦϑΝΫλϦϯά͢ΔͷͰ͋Ε͋ͬͨํ͕҆৺- E2E- ϚχϡΞϧςετ
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)- 400ܥ
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)- APIΛୟ͍ͨ࣌ͷRequest BodyQuery ParameterͳͲͷΞαʔγϣϯ
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND)- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)- E2E- ਖ਼ৗܥ- Mutationܥ(Post, Patch, Delete)- ੍ޚܥ(ݖݶೝূͳͲ)- ϚχϡΞϧςετ
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND)- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)- E2E- ϚχϡΞϧςετ- Ұ෦ਖ਼ৗܥͱɺσβΠϯपΓ- ΠϨΪϡϥʔܥ(ෳλϒ)όοΫάϥϯυॲཧͷ݁ՌͳͲ
݁Ռ🎉- ϑϩϯτΤϯυͷςετΛՃͯ͠ςετϐϥϛοτͷॏ৺͕Լ͕Γɺࣗಈςετͷίετ͕গ͠ݮͬͨ- ςετέʔε͕૿͑ͨɺΑΓ৴པੑ͕ߴ·Δ- ෭࣍తʹόοΫΤϯυͷAPI࣮͕ͪݮͬͨ
·ͱΊ
·ͱΊ🎉- ҆ఆ࣮ͯ͠ʙQA·ͰऴΘΔΑ͏ʹͳͬͨ- ࣗಈςετͷ৴པੑ͕ߴ·Γ҆৺ͯ͠ϑϩϯτΤϯυͷ։ൃͰ͖Δ- ࣮ʙϦϦʔε·Ͱૣ͘ͳͬͨ- QAͷྗେ͖͍ͷͰڠಇ͍ͯ͘͜͠ͱ͕େ- ࣗಈςετͷ৴པੑߴ·ΓɺϚχϡΞϧςετ࠷খݶͰߦ͑Δ
՝ɾ͍͖͍ͬͯͨ͜ͱ💪- ςετ؍ग़͔͠ΒɺৼΓ͚Δ·Ͱ͔ͳΓ͔͔࣌ؒΔ- QAతͳ͜ͱΛΤϯδχΞΔͷͰɺ࡞ۀ࣌ؒݮΔ- Jest Integration Test͕΄ͱΜͲΓͯͳ͍- ΤϯδχΞશମΛר͖ࠐΜͰ͍͘ඞཁ͕͋Δ
🙏https://hello-world.smarthr.co.jp/ϑϩϯτΤϯυΤϯδχΞੵۃ࠾༻த…ʂʂ