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.2k
component test
Kyoto.js 13の発表資料です
bokuweb
July 30, 2017
Tweet
Share
More Decks by bokuweb
See All by bokuweb
gocon2019.pdf
bokuweb
4
10k
emscripten_night_7.pdf
bokuweb
1
960
ファミコンエミュレータの創り方
bokuweb
58
40k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Six Lessons from altMBA
skipperchong
14
1.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Navigating Team Friction
lara
175
11k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Why Our Code Smells
bkeepers
PRO
324
54k
KATA
mclloyd
7
8.6k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
Atom: Resistance is Futile
akmur
255
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
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&45@/".&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 ࠓޙ֎෦αʔϏεͳͲؚΊͯબࢶ૿͖͑ͯͦ ͏ ݴ͍͔ͨͬͨ͜ͱ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠