Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
component test
bokuweb
July 30, 2017
7
4.4k
component test
Kyoto.js 13の発表資料です
bokuweb
July 30, 2017
Tweet
Share
More Decks by bokuweb
See All by bokuweb
gocon2019.pdf
bokuweb
4
11k
emscripten_night_7.pdf
bokuweb
1
1.1k
ファミコンエミュレータの創り方
bokuweb
58
41k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
171
20k
Unsuck your backbone
ammeep
659
56k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Thoughts on Productivity
jonyablonski
49
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
How STYLIGHT went responsive
nonsquared
89
4.2k
Building Your Own Lightsaber
phodgson
96
4.9k
Designing for humans not robots
tammielis
245
24k
Code Review Best Practice
trishagee
50
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Transcript
Ϩεͳίϯϙʔωϯτ ςετΛࢦͯ͠ !CPLVXFC
!CPLVXFC IUUQCMPHCPLVXFCNF w ݩΈࠐΈϋʔυ3VTUʹڵຯ͋Γ·͢ w ࢁ͔ΒԼΓ͖ͯ·ͨ͠ w ۀͰ"OHVMBSझຯͰ3FBDU ࣗݾհ CPLVXFC
w ͜Ε·Ͱͷίϯϙʔωϯτͷςετͱ 7JTVBM5FTUJOHʹࢸΔ·Ͱ w ࣮ફ7JTVBM5FTUJOH w ൵͍ࣦ͠ഊྫͱҙ ͢͜ͱ
͜Ε·Ͱͷίϯϙʔωϯτͷςετͱ 7JTVBM5FTUJOHʹࢸΔ·Ͱ
ίϯϙʔωϯτͷςετ Ͳ͏ͬͯ·͔͢ʁ
۪ʹΞαʔτ
۪ʹΞαʔτ ҎԼ&O[ZNFʹهࡌ͋ͬͨྫ import React from 'react'; import { expect }
from 'chai'; import { render } from 'enzyme'; import Foo from './Foo'; describe('<Foo />', () => { it('renders three `.foo-bar`s', () => { const wrapper = render(<Foo />); expect(wrapper.find('.foo-bar').length).to.equal(3); }); it('renders the title', () => { const wrapper = render(<Foo title="unique" />); expect(wrapper.text()).to.contain('unique'); }); });
AFYQFDU XSBQQFSUFYU UPDPOUBJO bVOJRVF AͷΑ͏ͳ ΞαʔγϣϯΛॻ͘ͱมߋʹऑ͘ɺϝϯςφϯε͕େม 5BCMFͰʮOߦ͕IPHFͰ͋Δ͜ͱɺNߦ͕GVHBͰ͋Δ͜ͱʯ ɹͷΑ͏ʹɺͪ·ͪ·Ξαʔγϣϯ͢Δͷෆໟ͔ͭݱ࣮తͰͳ͍ ݁ՌʮςʔϒϧͷSPX͕ߦ͋Δ͜ͱʯͷΑ͏ͳ;Θͬͱͨ͠ ɹςετʹͳΓ͕ͪʜ
؊৺ͳͱ͖ʹςετ͕མͪͳ͔ͬͨΓ ্هΛ͍͍ԘകͰߦ͍͍ͨ ͬͯΈͯ
ͬͱָʹ͍͍ԘകͰ ςετͰ͖ͳ͍͔
4OBQTIPUUFTUJOH
w ɹɹɹ"7"ɹɹ+FTU͕αϙʔτ w ίϯϙʔωϯτͷϨϯμϦϯά݁Ռ TOBQTIPU ΛKTPOͰอଘ લճ݁ՌΛਖ਼ͱ͠ࠓճ݁Ռͱൺֱɺ͕ࠩग़ͨ߹ɺࣦഊͱ͢Δ 4OBQTIPU5FTUJOH
"7"Ͱͷ༻ྫ ςετίʔυྫ import test from 'ava'; import React from 'react';
import render from 'react-test-renderer'; const HelloWorld = () => <h1>Hello World!</h1>; test('React Component snapshot test', t => { const tree = render.create( <HelloWorld /> ).toJSON(); t.snapshot(tree); }); 5&
[email protected]
/".&UFTUKTTOBQͷΑ͏ͳܗࣜͷεφοϓγϣοτϑΝΠϧ ʹอଘ͞ΕΔ ͜ΕΛ࣍ճFYQFDUFEͱ͢Δ
10: ).toJSON(); 11: t.snapshot(tree); 12: }); Did not match snapshot
Difference: <h1> - Hello World..!? + Hello World! </h1> "7"Ͱͷ༻ྫ A)FMMP8PSMEAA)FMMP8PSME Aมߋ࣌ςετ݁Ռ
ྑ͍
ҰࢹͰ֬ೝඞཁ͕ͩࡉʑͨ͠Ξαʔγϣϯ͕͍Βͳ͍ ֬ೝޙɺVΦϓγϣϯͰͬ͘͞ͱFYQFDUFEͷߋ৽͕Ͱ͖Δ ࢠίϯϙʔωϯτͷมߋݕग़Ͱ͖Δ ݟͨͷςετ·ͰͰ͖ͳ͍ DTTϑΝΠϧʹEJTQMBZOPOFͷΑ͏ͳมߋ͕ҙਤͤͣ ೖͬͯTOBQTIPUςετQBTT͢Δ ࢠίϯϙʔωϯτͷมߋʹΑΔίϯϙʔωϯτͷݟ͕ͨ ͲͷΑ͏ʹมΘ͔͔ͬͨΒͳ͍ ͬͯΈͯ
ίϯϙʔωϯτͷݟͨ·Ͱ ؚΊͯςετͰ͖ͳ͍͔
7JTVBMUFTUJOH
w ςετ࣌ʹίϯϙʔωϯτͷϨϯμϦϯά݁ՌΛը૾Ωϟ ϓνϟΛऔಘɺҎલQBTTͨ͠ը૾Λਖ਼ͱ͠ࠓճ݁Ռͱൺ ֱɺ͕ࠩग़ͨ߹ɺࣦഊͱ͢Δ w ཁલड़ͷ4OBQTIPU5FTUJOHͷը૾൛ 7JTVBM5FTUJOH
ٹ͍͍ͨྫ Search large… ! ݕࡧ ϘλϯʹQBEEJOH Ճͯ͠ʔ ྫ 4FBSDI'PSNKTY
ٹ͍͍ͨྫ Search large… ! ŝƄŒŖ ݕࡧ ίϯϙʔωϯτʹมߋ͕ೖͬͨࡍʹɺมߋ͞ΕͨίϯϙʔωϯτΛ ༻͍ͯ͠Δίϯϙʔωϯτͷݟͨ·Ͱ֬ೝ͕Ͱ͖Δ ྫ 4FBSDI'PSNKTY
ҙਤͤͣൃੜ্ͨ͠هͷΑ͏ͳέʔεʹؾ͖͍ͮͨ
%&.0
ҰࢹͰ֬ೝඞཁ͕ͩࡉʑͨ͠Ξαʔγϣϯ͕͍Βͳ͍ ݟؚͨΊͯςετ͕Մೳ ࢠίϯϙʔωϯτͷมߋʹΑΔίϯϙʔωϯτͷݟͨ ͷࠩ·Ͱݕग़Ͱ͖Δ ڥͷߏங͕େม ޙड़ 䠼࣮%0.ςετεΫϦʔϯγϣοτΛͱΔΈ͕ඞཁ ޙड़
ϑϧϨϯμϦϯάͳͷͰॏ͍ ͬͯΈͯ
࣮ફ7JTVBM5FTUJOH
ᶃςετ࣌ʹίϯϙʔωϯτͷTDSFFOTIPUΛอଘ͢Δ ᶄ(JUͷཤྺΛ୧ͬͯɺൺֱର FYQFDUFE ͱ͢ΔTDSFFOTIPUΛ 4͔Βμϯϩʔυ͢Δ ᶅࠓճͷTDSFFOTIPU BDUVBM ͱFYQFDUFEͷൺֱΛߦ͏ ᶆࠓճͷTDSFFOTIPU BDUVBM
ͱEJ⒎ը૾ͱIUNMϨϙʔτΛHJUͷ DPNNJUIBTIΛΩʔʹ4ʹΞοϓϩʔυ BDUVBM࣍ճҎ߱ͷFYQFDUFEީิͱͳΔ ᶇ4MBDLɺHJUIVCʹ݁ՌΛ௨ $*ͰͷྲྀΕ
ςετ࣌ͷTDSFFOTIPUอଘ ࣮%0.ʹϨϯμϦϯάͭͭ͠εΫϦʔϯγϣοτΛࡱΔඞཁ͕͋Δ w LBSNBOJHIUNBSF /JHIUNBSFΛىಈ͢ΔLBSNBϓϥάΠϯ w "WBSPO "7"ΛFMFDUSPO্ͷQSPDFTTͰಈ࡞ͤ͞ΔϞδϡʔϧ લड़ͷTOBQTIPUUFTUJOHซ༻Մೳ
ཁFMFDUSPOͷSFOEFSFSʹඳը͠ɺTDSFFOTIPUΛࡱΔ࡞ઓ
ςετ࣌ͷTDSFFOTIPUอଘ ςετίʔυྫ "WBSPO SFBDU import test from 'ava'; import
React from 'react'; import { render } from 'react-dom'; import { screenshot } from 'avaron'; const Example = () => <h1>Hello World!</h1>; test('React Component snapshot test', async t => { ɹrender(<Example />, document.querySelector('.main')); await screenshot('screenshots/sample.png'); }); TBNQMFQOHͱ͍͏QOH͕อଘ͞ΕΔ
(JUͷཤྺΛ୧ͬͯൺֱରΛऔಘ NBTUFS UPQJD FYQFDUFE BDUVBM ରͷDPNNJUIBTIΛಛఆ͠ɺͦΕΛΩʔʹFYQFDUFEΛμϯϩʔυ 13 )&"%
BDUVBMͱFYQFDUFEͷൺֱ w SFHDMJ ը૾ൺֱΛߦͬͯEJ⒎ͱIUNMϨϙʔτΛੜ JNBHFNBHJDLʹґଘ͕ͯͨ͠JNHEJ⒎KTҠߦ QVSF+4
४උ͕໘ w 4ͷόέοτ࡞ w (JUͷIBTI୳ࡧ w ը૾ൺֱ w 4ͷΞοϓϩʔυ w
4MBDL௨ w HJUIVC௨
SFHTVJU IUUQTSFHWJ[HJUIVCJPSFHTVJU DSFBUFECZ!2VSBNZ લทͷ໘ͳ࡞ۀΛαϙʔτͯ͘͠ΕΔ TBNQMFT IUUQTHJUIVCDPNSFHWJ[SFHTJNQMFEFNP IUUQTHJUIVCDPNCPLVXFCSFBDUBWBSPOSFHTBNQMF
൵͍ࣦ͠ഊྫͱҙ
൵͍ࣦ͠ഊྫ BDUVBM FYQFDUFE EJ⒎ * { transition: none !important; animation:
none !important; } Ϙλϯ͕ΞΫςΟϒʹͳͬͨࡍͷUSBOTJUJPOͰඍົʹ৭ҧ͏ UFTUͷpYUVSFIUNMʹҎԼΛಥͬࠐΜͩ ʂʁ
൵͍ࣦ͠ഊྫ BDUVBM ίετͷߴ͍ϖΠϯτ͕ؒʹ߹ͬͯͳ͔ͬͨ TDSFFOTIPUऔಘ·Ͱͪ࣌ؒΛগ͠Ճ ࠩݕग़ʹ͖͍͠Λઃఆ ݱঢ়͘Β͍ FYQFDUFE EJ⒎ ʂʁ
w 7JTVBM5FTUJOHݟؚͨΊͯςετͰ͖ͯ࠷ߴ w ࣮ߦ࣌ؒͱτϨʔυΦϑ w ҆ఆͨ͠εΫϦʔϯγϣοτ͕औΕΔΑ͏ߟྀ͕ඞཁ w ࠓޙ֎෦αʔϏεͳͲؚΊͯબࢶ૿͖͑ͯͦ ͏ ݴ͍͔ͨͬͨ͜ͱ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠