フロントエンドテストプラクティス in open 8

2021/09/13

Open8 で発表したフロントエンドテストプラクティスの話です。

Transcript

1. ϑϩϯτΤϯυςετ ϓϥΫςΟε 2021/09/13 @ Open8
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. ςετॻ͍ͯ·͔͢ʁ
4. খωλ ͜Εॻ͍ͨͷ๻ͳΜͰ͢ɻ
5. Testʹର͢Δίϝϯτ ఆྔతʹޮՌΛଌΓ͍ͨ
6. Testʹର͢Δίϝϯτ ͜ͷҙݟͰ'JO
7. ऴΘΓͰ͸͋Δ΋ͷͷɺ΋͏ গ͠ิ଍͍͖͍ͤͯͨͩͨ͞
8. ͦͷલʹ
9. ͦ΋ͦ΋ςετͱ͸Կ͔ • ඼࣭Λ্͛Δ΋ͷʢʁʣ • কདྷͷมߋΛ༰қʹͯ͘͠ΕΔ΋ͷʢʁʣ • ෆ۩߹Λݟ͚ͭͯ͘ΕΔͨΊͷະདྷ΁ͷ౤ࢿ ʢʁʣ ͲΕ΋ਖ਼ղ
10. ιϑτ΢ΣΞͷςετ͸ɺϓ ϩμΫτ·ͨ͸αʔϏεͷ඼ ࣭ʹؔ͢Δ৘ใΛεςʔΫϗ ϧμʔʹఏڙ͢ΔͨΊʹߦΘ ΕΔௐࠪͰ͋Δɻ Cem Kaner "Exploratory Testing"
11. ࿨ా͞Μͷݴ༿ https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔
12. ࿨ా͞Μͷݴ༿ https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔
13. ςετ = ମॏܭ • ͜ͷϝλϑΝʔΛ͏·͘ҙࣝ͢Δͱ৭ʑཧղ͠΍͍͢ • QA = ਓؒυοΫ • ຖ೔ਓؒυοΫʹߦͬͯຖ೔ϝσΟΧϧνΣοΫΛड ͚Δਓ͸͍ͳ͍ • ମॏܭʹ৐ͬͨΓɺ݂ѹܭͰଌͬͨΓ͢Δ͘Β͍͕ຖ ೔΍Δ͜ͱͱͯ͠ஸ౓͍͍ൣғͩͬͨΓ͢Δ
14. ςετ = ମॏܭ • ຖ೔ମॏܭ৐ͬͯΔ͚ͩ͡Ό૫ͤͳ͍ͷͱҰॹͰຖ೔CI ճͯ͠Δ͚ͩ͡Ό඼࣭͸ྑ͘ͳΒͳ͍ • ݱঢ়͕೺ѲͰ͖Δͷ͕ମॏܭͷ໾ׂɺ໨ඪΛݟਾ͑ͯվ ળΛ͢Δʹ͸৯ੜ׆ݟ௚ͨ͠Γɺӡಈͨ͠Γ͢Δඞཁ͕ ͋Δɻ • ඼࣭΋ಉ༷ɺ࣮ࡍʹϦϑΝΫλϦϯάͨ͠Γɺෆ۩߹ʹ ͳΓͦ͏ͳՕॴΛݟ͚ͭͯमਖ਼ͨ͠Γ͠ͳ͍ͱྑ͘ͳΒ ͳ͍ɻ
15. ςετ = ମॏܭ • ͜͜·ͰདྷͨΒΘ͔Δͱࢥ͏͚Ͳɺʮ૫͍͔ͤͨΒମ ॏܭΛങ͍͍ͨʯ͍ͬͯ͏࣌ʹʮମॏܭͷ౤ࢿରޮՌ ͸ʁʯͱฉ͔͘Β͓͔͘͠ͳΔɻ • ମॏܭ͸͋͘·Ͱݱঢ়೺ѲͷͨΊͷπʔϧɺ૫ͤΔͷ ͸৯ੜ׆ݟ௚ͨ͠Γɺӡಈ͢Δ͔Βɻ • ମॏܭ৐Βͳͯ͘΋૫ͤΔਓ΋͍Δ͚Ͳكɻ • ମॏܭ͸ങΘͳ͍ͱ૫ͤͳ͍ɻ
16. ͪͳΈʹຖ೔ηϧϑνΣοΫ ͢Δ΂͖݈߁߲໨
17. ιϑτ΢ΣΞͷςετ΋Ұॹ Logic UT E2E Test Visual Reg Test A11Y
18. ඼্࣭͛Δͷʹςετ͚ͩͰ͍ ͍Θ͚Ͱ΋ͳ͍ • ຖ೔ηϧϑνΣοΫΛ͍ͯͯ͠΋೤Λग़ͨ͠ Γɺ෩अΛҾ͍ͨΓ͢Δࣄ΋͋Δ • ؂ࢹ΋ॏཁ • ԿΛͨ͠Βࣄ৅͕ى͖ͨͷ͔Λه࿥͢ΔͨΊ ʹϩά΋ग़͞ͳ͍ͱ͍͚ͳ͍
19. ςετͱ͸ࣗ෼ͨͪͷݱ࣌఺ Ͱͷ඼࣭ΛνΣοΫ͢ΔͨΊ ͷݱঢ়෼ੳख๏ ඼࣭վળ͸৭ʑͳΞϓϩʔν ͕༗ΓɺͦͷதͷҰख๏
20. ͍ΖΜͳख๏͕͋Δͱݴͬͨ ͕ɺଞͷ΋ͷ΋঺հ
21. ςεςΟϯάͱνΣοΩϯά
22. ςεςΟϯάͱνΣοΩϯά • ςετۦಈ։ൃ • https://www.amazon.co.jp/dp/B077D2L69C/
23. checking • ࣗ෼ͨͪͷ಄ͷதͰʮਖ਼͍͠ʯͱࢥ͍ͬͯΔ͜ ͱΛ֬ೝ͢Δ͜ͱ • ֬ೝɾݕূɾଥ౰͔Ͳ͏͔ • ίʔυΛมߋͯ͠΋ಉ͡Α͏ʹಈ࡞͢Δ͔ͱ͔ ͸͜ͷ checking • ։ൃऀ͕΍Δςετ͸େମ͜Ε
24. testing • ࣗ෼ͨͪͷϓϩμΫτʹରͯ͠৽͍͠৘ใΛ ݟ͚ͭΔ୳ࡧߦಈ • ૝ఆ֎ͷ໰୊Λݟ͚ͭΔΑ͏ͳ΋ͷ • ୳ࡧɾൃݟɾڀ໌ɾֶश • QAΤϯδχΞ͕࣮ࢪ͢Δςετ͸େମͬͪ͜
25. test = check + explore
26. ։ൃऀ΍QAͷ྆ํ͕check͠ ͔ͯ͠ͳ͍ঢ়ଶͩͱ test ʹͳ Βͳ͍ɻ୳ࡧͯ͠ൃݟ͢Δϓ ϩηεΛೖΕΔඞཁ͕͋Δɻɹ
27. ୳ࡧ ࢓༷ͷൣғʹॻ͍ͯ͋Δ͚ͩ ͡Όͳ͘ɺͦͷ֎ଆʹ͍Δ Ϣʔβʔͷͭ΋ΓͰධՁ͢Δ
28. ։ൃऀ͚͕ͩ୲อ͢Δ΋ͷͰ ͸ͳ͍ɻ
29. QA͚͕ͩ୲อ͢Δ΋ͷͰ͸ͳ ͍ɻ
30. શһ໺ٿ
31. ͜͜·Ͱͷ·ͱΊ • ςετ͸ମॏܭ • ςετͷίεύΛฉ͍ͯΔͷ͸ʮମॏܭങͬͨΒͲΕ͘ Β͍૫ͤ·͔͢ʁʯͬͯฉ͍ͯΔͷͱҰॹ • ཧ૝ͷςετ͸֬ೝ(check)ͱ୳ࡧ(explore)ཱ͕͍྆ͯ͠ Δςετ • ͦΕΛ࣮ݱ͢ΔͨΊʹQAͱ։ൃͱϓϩδΣΫτΦʔφʔ ΋ҰؙʹͳΔඞཁ͕͋Δ
32. ຋ͬͯϑϩϯτΤϯυͷ ςετͷ࿩
33. ϑϩϯτΤϯυςετ • ։ൃऀͷҙਤ௨ΓʹϢʔβʔ͕ΞϓϦέʔγϣϯ΍ αʔϏεΛӾཡ͠ɺػೳ͕ར༻Ͱ͖͍ͯΔͷ͔Λݕ ূ͢ΔͨΊͷ΋ͷ • όοΫΤϯυͷςετ͸σʔλϕʔεʹ࣮ࡍʹҙਤ ௨Γʹσʔλ͕ετΞ͞ΕͯΔ͔ɺ໭Γ஋ͷJSONͷ ߏ଄͕͋ͬͯΔ͔ͳͲ͕ͩɺϑϩϯτΤϯυ͸ ʮʢओʹʣΫϥΠΞϯταΠυͰى͖ΔΤϥʔΛൃ ݟ͠ɺσϓϩΠલʹमਖ਼͢Δ͜ͱʯ͕ॏཁʹͳΔ
34. ϑϩϯτΤϯυςετ • Ϣχοτςετ • ݁߹ςετ • E2Eςετ • a11yςετ • ύϑΥʔϚϯεςετ • ϏδϡΞϧϦάϨογϣϯςετ
35. Ϣχοτςετ • ୯ମͷίϯϙʔωϯτɺٴͼ୯Ұػೳͷؔ਺ ͷ in / out ΛνΣοΫ͢Δςετ function doSomething(name) { if (name) { return name; } return "no name"; } // ୯ମςετ෦෼ test("doSomething", () => { assert("test", doSomething("test")); });
36. Why Ϣχοτςεπʁ • ΤοδέʔεʹΑͬͯϩδοΫ͕ഁ୼͍ͯ͠ͳ ͍͔ΛνΣοΫ͢ΔͨΊ • E2E΍Integration TestͰ͸࣮ݱͰ͖ͳ͍͕ɺ কདྷతͳมߋʹΑͬͯΤοδέʔε͕ೖΕΒ Εͨ࣌Ͱ΋ਖ਼ͦ͘͠ͷ୯ମίϯϙʔωϯτ͕ ಈ͔͘Ͳ͏͔Λ֬ೝ͢ΔͨΊ
37. ݁߹ςετ • "୯ମ"Λ௒͑ͯෳ਺ͷίϯϙʔωϯτΛ૊Έ߹ Θͤͨςετͷ͜ͱ export const Greeting = () => { const [showGreeting, setShowGreeting] = useState(false); return ( <div> <p data-testid="greeting">{showGreeting && sayHello()}</p> <button data-testid="show-greeting-button" onClick={() => setShowGreeting(true)}>Show Greeting</ button> </div> ); }; test('shows correct greeting', () => { const screen = render(<Greeting />); const greeting = screen.getByTestId('greeting'); const button = screen.getByTestId('show-greeting- button'); expect(greeting.textContent).toBe(''); fireEvent.click(button); expect(greeting.textContent).toBe('Hello human!'); });
38. Why ݁߹ςετ • Ϣχοτςετ͕୯ମͷϩδοΫΛݕূ͢Δ ΋ͷʹରͯ͠ɺ݁߹ςετ͸ϢχοτΛෳ਺ ݁߹ͨ͠ࡍͷৼΔ෣͍Λݕূ͍ͯ͠Δ • Ϣʔβʔ͕ΞϓϦέʔγϣϯΛ࢖͏ࡍʹ͸ෳ ਺ͷϢχοτ͕ؔΘΔͨΊɺ͜ͷํ͕Ϣʔ βʔͷಈ࡞ʹ͍ۙ
39. E2Eςετ • ࣮ࡍʹϒϥ΢βΛىಈͤͯ͞ϒϥ΢βϨϕϧͰͷ ৼΔ෣͍ɾΠϯλϥΫγϣϯΛݕূ͢Δ • ίʔυͷϩδοΫ΍ίϯϙʔωϯτͷৼΔ෣͍Ͱ ͸ͳ͘ɺϢʔβʔ͕ͲͷΑ͏ʹૢ࡞͢Δ͔Λ໛฿ ͨ͠ςετ • ͋Γͱ͋ΒΏΔύλʔϯΛ໢ཏ͠Α͏ͱ͢Δͱര ൃతʹ͕͔͔࣌ؒΔ
40. E2Eςετ
41. Why E2E ςετ • Ϣχοτςετ΍݁߹ςετΛͨ͠ͱͯ͠΋ͦ͜ ͔Β࿙Εͯ͠·͏έʔε͕͋ΓಘΔ • ࣮૷΍ίʔυ͚ͩͰ͸ͳ͘ɺnginx΍CDNͳͲͷ ϛυϧ΢ΣΞΛט·ͤͨΓ͢Δͱ݁Ռ͕ҟͳΔ έʔε΋ • ࣮ࡍʹຊ൪ʹ͍ۙ؀ڥͰ࣮ࢪ͢Ε͹໰୊ͷະવൃ ੜ͕๷͗΍͍͢
42. ͲΕ͘Β͍ͷׂ߹Ͱ΍Δͷ͕͍ ͍͔ʁ • Google ͸ • 10% E2E • 20% Integration • 70% Unit • ͱ͍͏ϐϥϛουΛܗ੒ͯ͠Δ https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
43. a11y ςετ • ࠷ۙྲྀߦΓͷΞΫηγϏϦςΟ·ͰؚΊͨςετ • εΫϦʔϯϦʔμʔͰͪΌΜͱಡΊΔͷ͔౳ͷΞ Ϋηγϒϧ͔Ͳ͏͔Λ֬ೝ͢Δ΋ͷ • ͪΌΜͱ΍Ζ͏ͱ͢Δͱେม͕ͩɺ࠷ۙͩͱ lighthouse ͳͲͷ؆қπʔϧͰݕূͰ͖ͨΓ͢ Δɻ
44. Why a11y tests? • ϙΠϯςΟϯάσόΠε͕ͪΌΜͱ࢖͑ͯɺ͸ͬ ͖Γͱ໨͕ݟ͑Δਓ͹͔ΓͰ͸ͳ͍ɻ • ৭ऑ΋͋ͬͨΓɺ৭໡΋͋ͬͨΓɺ໨͕ݟ͑ΔΘ ͚͡Όͳ͔ͬͨΓɺख͕͋ΔΘ͚͡Όͳ͔ͬͨΓ ͢Δɻ • ΧδϡΞϧʹ΍ΔͳΒlighthouseͰ఺਺͕ग़ͯϚΠ φεཁҼ͕෼͔ͬͨΓ͢Δɻ
45. Why a11y tests? • Lighthouse ͷ݁Ռ • ͪͳΈʹ͜Ε΋ puppeteer ͰऔΕΔ
46. Why a11y tests? • test ͡Όͳͯ͘ lint ͕ͩɺ accesslint ΍ axe- core(LH͕தͰ࢖ͬͯΔ΍ͭ) ͱ͔ͷνΣοΫ πʔϧ΋͋Δ
47. ύϑΥʔϚϯεςετ • ࣮ࡍʹϖʔδΛ։͍ͯදࣔ͞ΕΔ·ͰͩͬͨΓɺΠϯλ ϥΫγϣϯ͕ߦΘΕΔ·Ͱͷ࣌ؒΛܭଌͯ͠ݕূ͢Δͨ Ίͷςετ • ͜Ε΋ a11y ·Ͱͱಉ༷ʹΧδϡΞϧʹ΍ΔͳΒ Lighthouse Ͱ΍Δखஈ΋͋Δ • ҰํͰͪΌΜͱ΍Ζ͏ͱ͢Δͱେมɺ͜ͷ͋ͨΓ͸ a11y ςετͱࣅ͍ͯΔ
48. Why ύϑΥʔϚϯεςετ? • ΞϓϦέʔγϣϯ͕ظ଴௨Γͷ଎౓͕ग़ͯΔͷ͔ɺ࣮ࡍʹ֬ೝ͠ ͍ͨɻ • ࡢࠓ͸ύϑΥʔϚϯε΋Ϗδωεʹͱͬͯ༗ޮͳ৔߹͕͋Γɺͦ ΕʹΑͬͯSEOͷ݁ՌʹӨڹ͢ΔͳͲͷঢ়گ΋͋ͬͯԹ౓ײ͕ߴ ͘ͳ͍ͬͯΔɻ •
49. Why ύϑΥʔϚϯεςετ? • ύϑΥʔϚϯεʹؔ͢Δ΋ͷ΋࣮ࡍ͸ଟذʹΘͨΔ • όϯυϧαΠζ • ϖʔδಡΈࠐΈ࣌ؒ • ը૾αΠζ • ͳͲͳͲ • ͜ΕΒͷཁҼΛ·Δͬͱ͍͍ײ͡ʹධՁͯ͘͠ΕΔͷ͕Core Web Vitals • ҰํͰύϑΥʔϚϯε΋ຊདྷ͸໨త͕͋ΔͷͰࣗ෼ͨͪͰKPIΛ࡞ͬͯݕূΛ ࣮ࢪ͢Δͷ͕ϕετɻ
50. ϏδϡΞϧϦάϨογϣϯςε τ • ࠓճͷຊ୊ • ͜Ε·Ͱ͕"ૢ࡞"ʹରͯ͠ͷ"ৼΔ෣͍"Λςετ͍ͯ͠ ͨͷʹରͯ͠ɺVRT͸"ݟͨ໨"Λςετ͢Δ • ࣮ࡍ"ݟͨ໨"͸Ұ൪มߋ͕ଟ͍ͱ͜ΖͳͷͰɺ೉͍͠ɻ • ݟͨ໨͕มΘΔ͔Β view ͷςετ͸౤ࢿରޮՌ͕ѱ͍ ͱݴΘΕͨΓ΋͢Δɻ
51. ϏδϡΞϧϦάϨογϣϯςε τ • ݟͨ໨্ͷࠩ෼Λݕग़ͯ͠ɺݟͤΔ΋ͷ • E2EͰ΋͢Γൈ͚ͯ͠·͏Α͏ͳݟͨ໨ͷ่Ε ͱ͔Λݕग़Ͱ͖Δɻ
52. ϏδϡΞϧϦάϨογϣϯςε τ • ӡ༻࢝͠ΊΔͱେมͦ͏ • େମ߹ͬͯΔ • ࠩ෼͕ͲΕ͘Β͍ग़Δ͔Λ͖͍͠஋ͱͯ͠ઃఆ͢Δ • ಛʹ͖͍͠஋Λద੾ʹܾΊͯӡ༻͢Δͷ͕େม • ڊେͳϖʔδͰ΍Δͱ͍͍͖͍ͩͨ͠஋ͷઃఆ͕ ϖʔδ͝ͱʹҧ͍ͬͯͨΓͰେม
53. ϏδϡΞϧϦάϨογϣϯςε τ • ӡ༻࢝͠ΊΔͱେมͦ͏ • ͨͩҰํͰ΍ΕΔͱඇৗʹॿ͔Δଆ໘͕͋Δ • ಛʹݟͨ໨ʹΑͬͯCSSͷෆ۩߹Λݟ͚ͭΒ ΕΔ • ܦݧ্CSSͷෆ۩߹͕Ұ൪ΊΜͲ͍
54. ϏδϡΞϧϦάϨογϣϯςε τ • Ͳͷ͘Β͍ͷཻ౓Ͱ΍Δͱ͍͍ͷ͔ʁ • StoryBook ͰίϯϙʔωϯτΛ·ͱΊΔ͜ͱ͕͋Δͱࢥ͏͕ɺͦͷ୯ Ґ͘Βׂ͍͕ͱྑ͍ɻ • ཻ౓͕େ͖͍ͱ৭Μͳෆ֬ఆཁૉ͕བྷΉͷͰɺςετ͕ flaky ʹͳΓ͕ ͪ • ฐࣾͩͱ׬શʹίϯϙʔωϯτ୯ҐͰ StoryBook Λ࡞Γͳ͕Βɺ reg- suit ͱ૊Έ߹ΘͤͯσβΠϯ่ΕΛࣄલݕ஌͍ͯ͠Δ • StoryBook ۦಈ։ൃͱ͔ݺ͹ΕͯΔɻ
55. ϏδϡΞϧϦάϨογϣϯςε τ • Ͳͷ͘Β͍ͷཻ౓Ͱ΍Δͱ͍͍ͷ͔ʁ • ཻ౓͕େ͖͍ͱ͜Ζ͸ Autify ͱ͔ೖΕͯΔ • ͜ͷ͋ͨΓ͸׬શʹ༧ࢉͱͷউෛ • ମॏܭͱ͍ͬͨ΋ͷͷɺͳΜͰ΋͔ΜͰ΋ πʔϧೖΕΕ͹͍͍ͱ͍͏΋ͷͰ΋ͳ͍
56. ςετϕετϓϥΫςΟε • ϢχοτςετͱΠϯςάϨʔγϣϯςετ͸ؤுͬͯॻ͍͓ͯ ͘ɻ • E2E͸Ұ൪ҰൠతͳϩάΠϯ͔ͯ͠Β࠷ॳͷϖʔδϙνϙν͢Δ ͘Β͍·Ͱ͸΍Γ͍ͨɻ • a11y / performance ͸Lighthouseͱ͔Ͱ࠷ॳ͸ΧδϡΞϧʹɺ ঃʑʹࣗ෼ͨͪͷ໨తʹ߹Θ͍ͤͯ͘ • VRT ͸ StoryBook ϕʔεͰ࣮ࢪͭͭ͠ɺ͜Ε΋໨తʹ߹Θͤͯ૿ ΍͍ͯ͘͠
57. ϑϩϯτΤϯυͷ·ͱΊ • ୯ମςετ • ΠϯςάϨʔγϣϯςετ • E2Eςετ • a11yςετ • ύϑΥʔϚϯεςετ • Visual Regression Test