൥೰Ϩεͳίϯϙʔωϯτ ςετΛ໨ࢦͯ͠ !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('', () => { it('renders three `.foo-bar`s', () => { const wrapper = render(); expect(wrapper.find('.foo-bar').length).to.equal(3); }); it('renders the title', () => { const wrapper = render(); 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 = () =>

Hello World!

; test('React Component snapshot test', t => { const tree = render.create( ).toJSON(); t.snapshot(tree); }); 5&45@/".&UFTUKTTOBQͷΑ͏ͳܗࣜͷεφοϓγϣοτϑΝΠϧ ʹอଘ͞ΕΔ ͜ΕΛ࣍ճFYQFDUFEͱ͢Δ

10: ).toJSON(); 11: t.snapshot(tree); 12: }); Did not match snapshot Difference:

- Hello World..!? + Hello World!

"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อଘ ςετίʔυྫ "WBSPOSFBDU import test from 'ava'; import React from 'react'; import { render } from 'react-dom'; import { screenshot } from 'avaron'; const Example = () =>

Hello World!

; test('React Component snapshot test', async t => { ɹrender(, 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 ࠓޙ΋֎෦αʔϏεͳͲ΋ؚΊͯબ୒ࢶ͸૿͖͑ͯͦ ͏ ݴ͍͔ͨͬͨ͜ͱ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠