by bokuweb

Slide 1

Slide 1 text

൥೰Ϩεͳίϯϙʔωϯτ ςετΛ໨ࢦͯ͠ !CPLVXFC

Slide 2

Slide 2 text

!CPLVXFC IUUQCMPHCPLVXFCNF w ݩ૊ΈࠐΈϋʔυ԰3VTUʹڵຯ͋Γ·͢ w ࢁ͔ΒԼΓ͖ͯ·ͨ͠ w ۀ຿Ͱ"OHVMBSझຯͰ3FBDU ࣗݾ঺հ CPLVXFC

Slide 3

Slide 3 text

w ͜Ε·Ͱͷίϯϙʔωϯτͷςετͱ 7JTVBM5FTUJOHʹࢸΔ·Ͱ w ࣮ફ7JTVBM5FTUJOH w ൵͍ࣦ͠ഊྫͱ஫ҙ఺ ࿩͢͜ͱ

Slide 4

Slide 4 text

͜Ε·Ͱͷίϯϙʔωϯτͷςετͱ 7JTVBM5FTUJOHʹࢸΔ·Ͱ

Slide 5

Slide 5 text

ίϯϙʔωϯτͷςετ Ͳ͏΍ͬͯ·͔͢ʁ

Slide 6

Slide 6 text

۪௚ʹΞαʔτ

Slide 7

Slide 7 text

۪௚ʹΞαʔτ ҎԼ͸&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'); }); });

Slide 8

Slide 8 text

AFYQFDU XSBQQFSUFYU UPDPOUBJO bVOJRVF AͷΑ͏ͳ ΞαʔγϣϯΛॻ͘ͱมߋʹऑ͘ɺϝϯςφϯε͕େม 5BCMF౳ͰʮOߦ໨͕IPHFͰ͋Δ͜ͱɺNߦ໨͕GVHBͰ͋Δ͜ͱʯ ɹͷΑ͏ʹɺͪ·ͪ·Ξαʔγϣϯ͢Δͷ͸ෆໟ͔ͭݱ࣮తͰͳ͍ ݁ՌʮςʔϒϧͷSPX͕ߦ͋Δ͜ͱʯͷΑ͏ͳ;Θͬͱͨ͠ ɹςετʹͳΓ͕ͪʜ ؊৺ͳͱ͖ʹςετ͕མͪͳ͔ͬͨΓ ্هΛ͍͍ԘകͰߦ͍͍ͨ ΍ͬͯΈͯ

Slide 9

Slide 9 text

΋ͬͱָʹ͍͍ԘകͰ ςετͰ͖ͳ͍͔

Slide 10

Slide 10 text

4OBQTIPUUFTUJOH

Slide 11

Slide 11 text

w ɹɹɹ"7"΍ɹɹ+FTU͕αϙʔτ w ίϯϙʔωϯτͷϨϯμϦϯά݁Ռ TOBQTIPU ΛKTPOͰอଘ લճ݁ՌΛਖ਼ͱ͠ࠓճ݁Ռͱൺֱɺࠩ෼͕ग़ͨ৔߹ɺࣦഊͱ͢Δ 4OBQTIPU5FTUJOH

Slide 12

Slide 12 text

"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ͱ͢Δ

Slide 13

Slide 13 text

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

- Hello World..!? + Hello World!

"7"Ͱͷ࢖༻ྫ A)FMMP8PSMEAA)FMMP8PSME Aมߋ࣌ςετ݁Ռ

Slide 14

Slide 14 text

ྑ͍

Slide 15

Slide 15 text

Ұ౓໨ࢹͰ֬ೝ͸ඞཁ͕ͩࡉʑͨ͠Ξαʔγϣϯ͕͍Βͳ͍ ֬ೝޙɺVΦϓγϣϯͰͬ͘͞ͱFYQFDUFEͷߋ৽͕Ͱ͖Δ ࢠίϯϙʔωϯτͷมߋ΋ݕग़Ͱ͖Δ ݟͨ໨ͷςετ·Ͱ͸Ͱ͖ͳ͍ DTTϑΝΠϧʹEJTQMBZOPOFͷΑ͏ͳมߋ͕ҙਤͤͣ ೖͬͯ΋TOBQTIPUςετ͸QBTT͢Δ ࢠίϯϙʔωϯτͷมߋʹΑΔ਌ίϯϙʔωϯτͷݟͨ໨͕ ͲͷΑ͏ʹมΘ͔ͬͨ͸෼͔Βͳ͍ ΍ͬͯΈͯ

Slide 16

Slide 16 text

ίϯϙʔωϯτͷݟͨ໨·Ͱ ؚΊͯςετͰ͖ͳ͍͔

Slide 17

Slide 17 text

7JTVBMUFTUJOH

Slide 18

Slide 18 text

w ςετ࣌ʹίϯϙʔωϯτͷϨϯμϦϯά݁ՌΛը૾Ωϟ ϓνϟΛऔಘɺҎલQBTTͨ͠ը૾Λਖ਼ͱ͠ࠓճ݁Ռͱൺ ֱɺࠩ෼͕ग़ͨ৔߹ɺࣦഊͱ͢Δ w ཁ͸લड़ͷ4OBQTIPU5FTUJOHͷը૾൛ 7JTVBM5FTUJOH

Slide 19

Slide 19 text

ٹ͍͍ͨྫ Search large… ! ݕࡧ ϘλϯʹQBEEJOH ௥Ճͯ͠ʔ ྫ 4FBSDI'PSNKTY

Slide 20

Slide 20 text

ٹ͍͍ͨྫ Search large… ! ŝƄŒŖ ݕࡧ ίϯϙʔωϯτʹมߋ͕ೖͬͨࡍʹɺมߋ͞ΕͨίϯϙʔωϯτΛ ࢖༻͍ͯ͠Δ਌ίϯϙʔωϯτͷݟͨ໨·Ͱ֬ೝ͕Ͱ͖Δ ྫ 4FBSDI'PSNKTY ҙਤͤͣൃੜ্ͨ͠هͷΑ͏ͳέʔεʹؾ͖͍ͮͨ

Slide 21

Slide 21 text

%&.0

Slide 22

Slide 22 text

Ұ౓໨ࢹͰ֬ೝ͸ඞཁ͕ͩࡉʑͨ͠Ξαʔγϣϯ͕͍Βͳ͍ ݟͨ໨΋ؚΊͯςετ͕Մೳ ࢠίϯϙʔωϯτͷมߋʹΑΔ਌ίϯϙʔωϯτͷݟͨ໨ ͷࠩ෼·Ͱݕग़Ͱ͖Δ ؀ڥͷߏங͕େม ޙड़ 䠼࣮%0.ςετεΫϦʔϯγϣοτΛͱΔ࢓૊Έ͕ඞཁ ޙड़ ϑϧϨϯμϦϯάͳͷͰॏ͍ ΍ͬͯΈͯ

Slide 23

Slide 23 text

࣮ફ7JTVBM5FTUJOH

Slide 24

Slide 24 text

ᶃςετ࣌ʹίϯϙʔωϯτͷTDSFFOTIPUΛอଘ͢Δ ᶄ(JUͷཤྺΛ୧ͬͯɺൺֱର৅ FYQFDUFE ͱ͢ΔTDSFFOTIPUΛ  4͔Βμ΢ϯϩʔυ͢Δ ᶅࠓճͷTDSFFOTIPU BDUVBM ͱFYQFDUFEͷൺֱΛߦ͏ ᶆࠓճͷTDSFFOTIPU BDUVBM ͱEJ⒎ը૾ͱIUNMϨϙʔτΛHJUͷ DPNNJUIBTIΛΩʔʹ4ʹΞοϓϩʔυ BDUVBM͸࣍ճҎ߱ͷFYQFDUFEީิͱͳΔ ᶇ4MBDLɺHJUIVCʹ݁ՌΛ௨஌ $*ͰͷྲྀΕ

Slide 25

Slide 25 text

ςετ࣌ͷTDSFFOTIPUอଘ ࣮%0.ʹϨϯμϦϯάͭͭ͠εΫϦʔϯγϣοτΛࡱΔඞཁ͕͋Δ w LBSNBOJHIUNBSF /JHIUNBSFΛىಈ͢ΔLBSNBϓϥάΠϯ w "WBSPO "7"ΛFMFDUSPO্ͷQSPDFTTͰಈ࡞ͤ͞ΔϞδϡʔϧ લड़ͷTOBQTIPUUFTUJOH΋ซ༻Մೳ ཁ͸FMFDUSPOͷSFOEFSFSʹඳը͠ɺTDSFFOTIPUΛࡱΔ࡞ઓ

Slide 26

Slide 26 text

ςετ࣌ͷ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͕อଘ͞ΕΔ

Slide 27

Slide 27 text

(JUͷཤྺΛ୧ͬͯൺֱର৅Λऔಘ NBTUFS UPQJD FYQFDUFE BDUVBM ର৅ͷDPNNJUIBTIΛಛఆ͠ɺͦΕΛΩʔʹFYQFDUFEΛμ΢ϯϩʔυ 13 )&"%

Slide 28

Slide 28 text

BDUVBMͱFYQFDUFEͷൺֱ w SFHDMJ ը૾ൺֱΛߦͬͯEJ⒎ͱIUNMϨϙʔτΛੜ੒ JNBHFNBHJDLʹґଘ͕ͯͨ͠JNHEJ⒎KT΁Ҡߦ QVSF+4

Slide 29

Slide 29 text

४උ͕໘౗ w 4ͷόέοτ࡞੒ w (JUͷIBTI୳ࡧ w ը૾ൺֱ w 4΁ͷΞοϓϩʔυ w 4MBDL௨஌ w HJUIVC௨஌

Slide 30

Slide 30 text

SFHTVJU IUUQTSFHWJ[HJUIVCJPSFHTVJU DSFBUFECZ!2VSBNZ લทͷ໘౗ͳ࡞ۀΛαϙʔτͯ͘͠ΕΔ TBNQMFT IUUQTHJUIVCDPNSFHWJ[SFHTJNQMFEFNP IUUQTHJUIVCDPNCPLVXFCSFBDUBWBSPOSFHTBNQMF

Slide 31

Slide 31 text

൵͍ࣦ͠ഊྫͱ஫ҙ఺

Slide 32

Slide 32 text

൵͍ࣦ͠ഊྫ BDUVBM FYQFDUFE EJ⒎ * { transition: none !important; animation: none !important; } Ϙλϯ͕ΞΫςΟϒʹͳͬͨࡍͷUSBOTJUJPOͰඍົʹ৭ҧ͏ UFTUͷpYUVSFIUNMʹҎԼΛಥͬࠐΜͩ ʂʁ

Slide 33

Slide 33 text

൵͍ࣦ͠ഊྫ BDUVBM ίετͷߴ͍ϖΠϯτ͕ؒʹ߹ͬͯͳ͔ͬͨ TDSFFOTIPUऔಘ·Ͱ଴ͪ࣌ؒΛগ͠௥Ճ ࠩ෼ݕग़ʹ͖͍͠஋Λઃఆ ݱঢ়͘Β͍ FYQFDUFE EJ⒎ ʂʁ

Slide 34

Slide 34 text

w 7JTVBM5FTUJOH͸ݟͨ໨΋ؚΊͯςετͰ͖ͯ࠷ߴ w ࣮ߦ࣌ؒͱ͸τϨʔυΦϑ w ҆ఆͨ͠εΫϦʔϯγϣοτ͕औΕΔΑ͏ߟྀ͕ඞཁ w ࠓޙ΋֎෦αʔϏεͳͲ΋ؚΊͯબ୒ࢶ͸૿͖͑ͯͦ ͏ ݴ͍͔ͨͬͨ͜ͱ

Slide 35

Slide 35 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠