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

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