Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドテストプラクティス in open 8
Search
Yosuke Furukawa
PRO
September 13, 2021
Programming
44
16k
フロントエンドテストプラクティス in open 8
2021/09/13
Open8 で発表したフロントエンドテストプラクティスの話です。
Yosuke Furukawa
PRO
September 13, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
7
3.5k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
220
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
400
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
800
Other Decks in Programming
See All in Programming
「兵法」から見る質とスピード
ickx
0
190
メモリリークが発生した時にpprofを使用して原因特定した話
zono33lhd
0
100
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
590
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
590
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
800
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
760
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
990
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Facilitating Awesome Meetings
lara
54
6.4k
A designer walks into a library…
pauljervisheath
205
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
BBQ
matthewcrist
88
9.7k
4 Signs Your Business is Dying
shpigford
183
22k
Writing Fast Ruby
sferik
628
61k
Code Reviewing Like a Champion
maltzj
523
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Practical Orchestrator
shlominoach
188
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Transcript
ϑϩϯτΤϯυςετ ϓϥΫςΟε 2021/09/13 @ Open8
Twitter: @yosuke_furukawa Github: yosuke-furukawa
ςετॻ͍ͯ·͔͢ʁ
খωλ ͜Εॻ͍ͨͷͳΜͰ͢ɻ
Testʹର͢Δίϝϯτ ఆྔతʹޮՌΛଌΓ͍ͨ
Testʹର͢Δίϝϯτ ͜ͷҙݟͰ'JO
ऴΘΓͰ͋Δͷͷɺ͏ গ͠ิ͍͖͍ͤͯͨͩͨ͞
ͦͷલʹ
ͦͦςετͱԿ͔ • ࣭Λ্͛Δͷʢʁʣ • কདྷͷมߋΛ༰қʹͯ͘͠ΕΔͷʢʁʣ • ෆ۩߹Λݟ͚ͭͯ͘ΕΔͨΊͷະདྷͷࢿ ʢʁʣ ͲΕਖ਼ղ
ιϑτΣΞͷςετɺϓ ϩμΫτ·ͨαʔϏεͷ ࣭ʹؔ͢ΔใΛεςʔΫϗ ϧμʔʹఏڙ͢ΔͨΊʹߦΘ ΕΔௐࠪͰ͋Δɻ Cem Kaner "Exploratory Testing"
ా͞Μͷݴ༿ https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔
ా͞Μͷݴ༿ https://www.slideshare.net/t_wada/jasst-2014-hokkaidotwadatdd Test Yourself - ςετΛॻ͘ͱԿ͕Ͳ͏มΘΔ͔
ςετ = ମॏܭ • ͜ͷϝλϑΝʔΛ͏·͘ҙࣝ͢Δͱ৭ʑཧղ͍͢͠ • QA = ਓؒυοΫ •
ຖਓؒυοΫʹߦͬͯຖϝσΟΧϧνΣοΫΛड ͚Δਓ͍ͳ͍ • ମॏܭʹͬͨΓɺ݂ѹܭͰଌͬͨΓ͢Δ͘Β͍͕ຖ Δ͜ͱͱͯ͠ஸ͍͍ൣғͩͬͨΓ͢Δ
ςετ = ମॏܭ • ຖମॏܭͬͯΔ͚ͩ͡Ό૫ͤͳ͍ͷͱҰॹͰຖCI ճͯ͠Δ͚ͩ͡Ό࣭ྑ͘ͳΒͳ͍ • ݱঢ়͕ѲͰ͖Δͷ͕ମॏܭͷׂɺඪΛݟਾ͑ͯվ ળΛ͢Δʹ৯ੜ׆ݟͨ͠Γɺӡಈͨ͠Γ͢Δඞཁ͕ ͋Δɻ
• ࣭ಉ༷ɺ࣮ࡍʹϦϑΝΫλϦϯάͨ͠Γɺෆ۩߹ʹ ͳΓͦ͏ͳՕॴΛݟ͚ͭͯमਖ਼ͨ͠Γ͠ͳ͍ͱྑ͘ͳΒ ͳ͍ɻ
ςετ = ମॏܭ • ͜͜·ͰདྷͨΒΘ͔Δͱࢥ͏͚Ͳɺʮ૫͍͔ͤͨΒମ ॏܭΛങ͍͍ͨʯ͍ͬͯ͏࣌ʹʮମॏܭͷࢿରޮՌ ʁʯͱฉ͔͘Β͓͔͘͠ͳΔɻ • ମॏܭ͋͘·Ͱݱঢ়ѲͷͨΊͷπʔϧɺ૫ͤΔͷ ৯ੜ׆ݟͨ͠Γɺӡಈ͢Δ͔Βɻ
• ମॏܭΒͳͯ͘૫ͤΔਓ͍Δ͚Ͳكɻ • ମॏܭങΘͳ͍ͱ૫ͤͳ͍ɻ
ͪͳΈʹຖηϧϑνΣοΫ ͢Δ͖݈߁߲
ιϑτΣΞͷςετҰॹ Logic UT E2E Test Visual Reg Test A11Y
্࣭͛Δͷʹςετ͚ͩͰ͍ ͍Θ͚Ͱͳ͍ • ຖηϧϑνΣοΫΛ͍ͯͯ͠Λग़ͨ͠ Γɺ෩अΛҾ͍ͨΓ͢Δࣄ͋Δ • ࢹॏཁ • ԿΛͨ͠Βࣄ͕ى͖ͨͷ͔Λه͢ΔͨΊ ʹϩάग़͞ͳ͍ͱ͍͚ͳ͍
ςετͱࣗͨͪͷݱ࣌ Ͱͷ࣭ΛνΣοΫ͢ΔͨΊ ͷݱঢ়ੳख๏ ࣭վળ৭ʑͳΞϓϩʔν ͕༗ΓɺͦͷதͷҰख๏
͍ΖΜͳख๏͕͋Δͱݴͬͨ ͕ɺଞͷͷհ
ςεςΟϯάͱνΣοΩϯά
ςεςΟϯάͱνΣοΩϯά • ςετۦಈ։ൃ • https://www.amazon.co.jp/dp/B077D2L69C/
checking • ࣗͨͪͷ಄ͷதͰʮਖ਼͍͠ʯͱࢥ͍ͬͯΔ͜ ͱΛ֬ೝ͢Δ͜ͱ • ֬ೝɾݕূɾଥ͔Ͳ͏͔ • ίʔυΛมߋͯ͠ಉ͡Α͏ʹಈ࡞͢Δ͔ͱ͔ ͜ͷ checking
• ։ൃऀ͕Δςετେମ͜Ε
testing • ࣗͨͪͷϓϩμΫτʹରͯ͠৽͍͠ใΛ ݟ͚ͭΔ୳ࡧߦಈ • ఆ֎ͷΛݟ͚ͭΔΑ͏ͳͷ • ୳ࡧɾൃݟɾڀ໌ɾֶश • QAΤϯδχΞ͕࣮ࢪ͢Δςετେମͬͪ͜
test = check + explore
։ൃऀQAͷ྆ํ͕check͠ ͔ͯ͠ͳ͍ঢ়ଶͩͱ test ʹͳ Βͳ͍ɻ୳ࡧͯ͠ൃݟ͢Δϓ ϩηεΛೖΕΔඞཁ͕͋Δɻɹ
୳ࡧ ༷ͷൣғʹॻ͍ͯ͋Δ͚ͩ ͡Όͳ͘ɺͦͷ֎ଆʹ͍Δ ϢʔβʔͷͭΓͰධՁ͢Δ
։ൃऀ͚͕ͩ୲อ͢ΔͷͰ ͳ͍ɻ
QA͚͕ͩ୲อ͢ΔͷͰͳ ͍ɻ
શһٿ
͜͜·Ͱͷ·ͱΊ • ςετମॏܭ • ςετͷίεύΛฉ͍ͯΔͷʮମॏܭങͬͨΒͲΕ͘ Β͍૫ͤ·͔͢ʁʯͬͯฉ͍ͯΔͷͱҰॹ • ཧͷςετ֬ೝ(check)ͱ୳ࡧ(explore)ཱ͕͍྆ͯ͠ Δςετ •
ͦΕΛ࣮ݱ͢ΔͨΊʹQAͱ։ൃͱϓϩδΣΫτΦʔφʔ ҰؙʹͳΔඞཁ͕͋Δ
ͬͯϑϩϯτΤϯυͷ ςετͷ
ϑϩϯτΤϯυςετ • ։ൃऀͷҙਤ௨ΓʹϢʔβʔ͕ΞϓϦέʔγϣϯ αʔϏεΛӾཡ͠ɺػೳ͕ར༻Ͱ͖͍ͯΔͷ͔Λݕ ূ͢ΔͨΊͷͷ • όοΫΤϯυͷςετσʔλϕʔεʹ࣮ࡍʹҙਤ ௨Γʹσʔλ͕ετΞ͞ΕͯΔ͔ɺΓͷJSONͷ ߏ͕͋ͬͯΔ͔ͳͲ͕ͩɺϑϩϯτΤϯυ ʮʢओʹʣΫϥΠΞϯταΠυͰى͖ΔΤϥʔΛൃ
ݟ͠ɺσϓϩΠલʹमਖ਼͢Δ͜ͱʯ͕ॏཁʹͳΔ
ϑϩϯτΤϯυςετ • Ϣχοτςετ • ݁߹ςετ • E2Eςετ • a11yςετ •
ύϑΥʔϚϯεςετ • ϏδϡΞϧϦάϨογϣϯςετ
Ϣχοτςετ • ୯ମͷίϯϙʔωϯτɺٴͼ୯Ұػೳͷؔ ͷ in / out ΛνΣοΫ͢Δςετ function doSomething(name)
{ if (name) { return name; } return "no name"; } // ୯ମςετ෦ test("doSomething", () => { assert("test", doSomething("test")); });
Why Ϣχοτςεπʁ • ΤοδέʔεʹΑͬͯϩδοΫ͕ഁ͍ͯ͠ͳ ͍͔ΛνΣοΫ͢ΔͨΊ • E2EIntegration TestͰ࣮ݱͰ͖ͳ͍͕ɺ কདྷతͳมߋʹΑͬͯΤοδέʔε͕ೖΕΒ Εͨ࣌Ͱਖ਼ͦ͘͠ͷ୯ମίϯϙʔωϯτ͕
ಈ͔͘Ͳ͏͔Λ֬ೝ͢ΔͨΊ
݁߹ςετ • "୯ମ"Λ͑ͯෳͷίϯϙʔωϯτΛΈ߹ Θͤͨςετͷ͜ͱ 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!'); });
Why ݁߹ςετ • Ϣχοτςετ͕୯ମͷϩδοΫΛݕূ͢Δ ͷʹରͯ͠ɺ݁߹ςετϢχοτΛෳ ݁߹ͨ͠ࡍͷৼΔ͍Λݕূ͍ͯ͠Δ • Ϣʔβʔ͕ΞϓϦέʔγϣϯΛ͏ࡍʹෳ ͷϢχοτ͕ؔΘΔͨΊɺ͜ͷํ͕Ϣʔ βʔͷಈ࡞ʹ͍ۙ
E2Eςετ • ࣮ࡍʹϒϥβΛىಈͤͯ͞ϒϥβϨϕϧͰͷ ৼΔ͍ɾΠϯλϥΫγϣϯΛݕূ͢Δ • ίʔυͷϩδοΫίϯϙʔωϯτͷৼΔ͍Ͱ ͳ͘ɺϢʔβʔ͕ͲͷΑ͏ʹૢ࡞͢Δ͔Λ฿ ͨ͠ςετ • ͋Γͱ͋ΒΏΔύλʔϯΛཏ͠Α͏ͱ͢Δͱര
ൃతʹ͕͔͔࣌ؒΔ
E2Eςετ
Why E2E ςετ • Ϣχοτςετ݁߹ςετΛͨ͠ͱͯͦ͜͠ ͔Β࿙Εͯ͠·͏έʔε͕͋ΓಘΔ • ࣮ίʔυ͚ͩͰͳ͘ɺnginxCDNͳͲͷ ϛυϧΣΞΛט·ͤͨΓ͢Δͱ݁Ռ͕ҟͳΔ έʔε
• ࣮ࡍʹຊ൪ʹ͍ۙڥͰ࣮ࢪ͢Εͷະવൃ ੜ͕͍͗͢
ͲΕ͘Β͍ͷׂ߹ͰΔͷ͕͍ ͍͔ʁ • Google • 10% E2E • 20%
Integration • 70% Unit • ͱ͍͏ϐϥϛουΛܗͯ͠Δ https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
a11y ςετ • ࠷ۙྲྀߦΓͷΞΫηγϏϦςΟ·ͰؚΊͨςετ • εΫϦʔϯϦʔμʔͰͪΌΜͱಡΊΔͷ͔ͷΞ Ϋηγϒϧ͔Ͳ͏͔Λ֬ೝ͢Δͷ • ͪΌΜͱΖ͏ͱ͢Δͱେม͕ͩɺ࠷ۙͩͱ lighthouse
ͳͲͷ؆қπʔϧͰݕূͰ͖ͨΓ͢ Δɻ
Why a11y tests? • ϙΠϯςΟϯάσόΠε͕ͪΌΜͱ͑ͯɺͬ ͖Γͱ͕ݟ͑Δਓ͔ΓͰͳ͍ɻ • ৭ऑ͋ͬͨΓɺ৭͋ͬͨΓɺ͕ݟ͑ΔΘ ͚͡Όͳ͔ͬͨΓɺख͕͋ΔΘ͚͡Όͳ͔ͬͨΓ ͢Δɻ
• ΧδϡΞϧʹΔͳΒlighthouseͰ͕ग़ͯϚΠ φεཁҼ͕͔ͬͨΓ͢Δɻ
Why a11y tests? • Lighthouse ͷ݁Ռ • ͪͳΈʹ͜Ε puppeteer ͰऔΕΔ
Why a11y tests? • test ͡Όͳͯ͘ lint ͕ͩɺ accesslint
axe- core(LH͕தͰͬͯΔͭ) ͱ͔ͷνΣοΫ πʔϧ͋Δ
ύϑΥʔϚϯεςετ • ࣮ࡍʹϖʔδΛ։͍ͯදࣔ͞ΕΔ·ͰͩͬͨΓɺΠϯλ ϥΫγϣϯ͕ߦΘΕΔ·Ͱͷ࣌ؒΛܭଌͯ͠ݕূ͢Δͨ Ίͷςετ • ͜Ε a11y ·Ͱͱಉ༷ʹΧδϡΞϧʹΔͳΒ Lighthouse
ͰΔखஈ͋Δ • ҰํͰͪΌΜͱΖ͏ͱ͢Δͱେมɺ͜ͷ͋ͨΓ a11y ςετͱࣅ͍ͯΔ
Why ύϑΥʔϚϯεςετ? • ΞϓϦέʔγϣϯ͕ظ௨Γͷ͕ग़ͯΔͷ͔ɺ࣮ࡍʹ֬ೝ͠ ͍ͨɻ • ࡢࠓύϑΥʔϚϯεϏδωεʹͱͬͯ༗ޮͳ߹͕͋Γɺͦ ΕʹΑͬͯSEOͷ݁ՌʹӨڹ͢ΔͳͲͷঢ়گ͋ͬͯԹײ͕ߴ ͘ͳ͍ͬͯΔɻ •
Why ύϑΥʔϚϯεςετ? • ύϑΥʔϚϯεʹؔ͢Δͷ࣮ࡍଟذʹΘͨΔ • όϯυϧαΠζ • ϖʔδಡΈࠐΈ࣌ؒ • ը૾αΠζ
• ͳͲͳͲ • ͜ΕΒͷཁҼΛ·Δͬͱ͍͍ײ͡ʹධՁͯ͘͠ΕΔͷ͕Core Web Vitals • ҰํͰύϑΥʔϚϯεຊདྷత͕͋ΔͷͰࣗͨͪͰKPIΛ࡞ͬͯݕূΛ ࣮ࢪ͢Δͷ͕ϕετɻ
ϏδϡΞϧϦάϨογϣϯςε τ • ࠓճͷຊ • ͜Ε·Ͱ͕"ૢ࡞"ʹରͯ͠ͷ"ৼΔ͍"Λςετ͍ͯ͠ ͨͷʹରͯ͠ɺVRT"ݟͨ"Λςετ͢Δ • ࣮ࡍ"ݟͨ"Ұ൪มߋ͕ଟ͍ͱ͜ΖͳͷͰɺ͍͠ɻ •
ݟ͕ͨมΘΔ͔Β view ͷςετࢿରޮՌ͕ѱ͍ ͱݴΘΕͨΓ͢Δɻ
ϏδϡΞϧϦάϨογϣϯςε τ • ݟ্ͨͷࠩΛݕग़ͯ͠ɺݟͤΔͷ • E2EͰ͢Γൈ͚ͯ͠·͏Α͏ͳݟͨͷ่Ε ͱ͔Λݕग़Ͱ͖Δɻ
ϏδϡΞϧϦάϨογϣϯςε τ • ӡ༻࢝͠ΊΔͱେมͦ͏ • େମ߹ͬͯΔ • ͕ࠩͲΕ͘Β͍ग़Δ͔Λ͖͍͠ͱͯ͠ઃఆ͢Δ • ಛʹ͖͍͠ΛదʹܾΊͯӡ༻͢Δͷ͕େม
• ڊେͳϖʔδͰΔͱ͍͍͖͍ͩͨ͠ͷઃఆ͕ ϖʔδ͝ͱʹҧ͍ͬͯͨΓͰେม
ϏδϡΞϧϦάϨογϣϯςε τ • ӡ༻࢝͠ΊΔͱେมͦ͏ • ͨͩҰํͰΕΔͱඇৗʹॿ͔Δଆ໘͕͋Δ • ಛʹݟͨʹΑͬͯCSSͷෆ۩߹Λݟ͚ͭΒ ΕΔ •
ܦݧ্CSSͷෆ۩߹͕Ұ൪ΊΜͲ͍
ϏδϡΞϧϦάϨογϣϯςε τ • Ͳͷ͘Β͍ͷཻͰΔͱ͍͍ͷ͔ʁ • StoryBook ͰίϯϙʔωϯτΛ·ͱΊΔ͜ͱ͕͋Δͱࢥ͏͕ɺͦͷ୯ Ґ͘Βׂ͍͕ͱྑ͍ɻ • ཻ͕େ͖͍ͱ৭Μͳෆ֬ఆཁૉ͕བྷΉͷͰɺςετ͕
flaky ʹͳΓ͕ ͪ • ฐࣾͩͱશʹίϯϙʔωϯτ୯ҐͰ StoryBook Λ࡞Γͳ͕Βɺ reg- suit ͱΈ߹ΘͤͯσβΠϯ่ΕΛࣄલݕ͍ͯ͠Δ • StoryBook ۦಈ։ൃͱ͔ݺΕͯΔɻ
ϏδϡΞϧϦάϨογϣϯςε τ • Ͳͷ͘Β͍ͷཻͰΔͱ͍͍ͷ͔ʁ • ཻ͕େ͖͍ͱ͜Ζ Autify ͱ͔ೖΕͯΔ • ͜ͷ͋ͨΓશʹ༧ࢉͱͷউෛ
• ମॏܭͱ͍ͬͨͷͷɺͳΜͰ͔ΜͰ πʔϧೖΕΕ͍͍ͱ͍͏ͷͰͳ͍
ςετϕετϓϥΫςΟε • ϢχοτςετͱΠϯςάϨʔγϣϯςετؤுͬͯॻ͍͓ͯ ͘ɻ • E2EҰ൪ҰൠతͳϩάΠϯ͔ͯ͠Β࠷ॳͷϖʔδϙνϙν͢Δ ͘Β͍·ͰΓ͍ͨɻ • a11y /
performance Lighthouseͱ͔Ͱ࠷ॳΧδϡΞϧʹɺ ঃʑʹࣗͨͪͷతʹ߹Θ͍ͤͯ͘ • VRT StoryBook ϕʔεͰ࣮ࢪͭͭ͠ɺ͜Εతʹ߹Θͤͯ૿ ͍ͯ͘͠
ϑϩϯτΤϯυͷ·ͱΊ • ୯ମςετ • ΠϯςάϨʔγϣϯςετ • E2Eςετ • a11yςετ •
ύϑΥʔϚϯεςετ • Visual Regression Test