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
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
14
2.2k
Strip Types と Storage
yosuke_furukawa
PRO
4
300
Module Harmony について
yosuke_furukawa
PRO
3
1.4k
LTのやり方
yosuke_furukawa
PRO
16
2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
660
Node.js v22 で変わること
yosuke_furukawa
PRO
13
4.9k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.3k
JavaScript Server Runtime History
yosuke_furukawa
PRO
9
3.6k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.7k
Other Decks in Programming
See All in Programming
A New Era of Testing
mannodermaus
2
230
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
260
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
190
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
480
New Order in Cascade Sorting Order
mugi_uno
3
2.6k
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
200
Some more adventure of Happy Eyeballs
coe401_
2
180
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
790
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1k
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
250
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Design by the Numbers
sachag
277
19k
A Tale of Four Properties
chriscoyier
155
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Code Review Best Practice
trishagee
62
16k
Docker and Python
trallard
39
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
4 Signs Your Business is Dying
shpigford
179
21k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
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