component test

Transcript

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

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

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

4. ͜Ε·Ͱͷίϯϙʔωϯτͷςετͱ 7JTVBM5FTUJOHʹࢸΔ·Ͱ

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

6. ۪௚ʹΞαʔτ

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

8. 
   AFYQFDU XSBQQFSUFYU UPDPOUBJO bVOJRVF AͷΑ͏ͳ
   
   
   
   
   ΞαʔγϣϯΛॻ͘ͱมߋʹऑ͘ɺϝϯςφϯε͕େม
   
   5BCMF౳ͰʮOߦ໨͕IPHFͰ͋Δ͜ͱɺNߦ໨͕GVHBͰ͋Δ͜ͱʯ
   
   
   
   
   
   ɹ
   ͷΑ͏ʹɺͪ·ͪ·Ξαʔγϣϯ͢Δͷ͸ෆໟ͔ͭݱ࣮తͰͳ͍
   
   ݁ՌʮςʔϒϧͷSPX͕ߦ͋Δ͜ͱʯͷΑ͏ͳ;Θͬͱͨ͠
   ɹςετʹͳΓ͕ͪʜ

   ؊৺ͳͱ͖ʹςετ͕མͪͳ͔ͬͨΓ
   
   ্هΛ͍͍ԘകͰߦ͍͍ͨ ΍ͬͯΈͯ
   

9. ΋ͬͱָʹ͍͍ԘകͰ
   ςετͰ͖ͳ͍͔

10. 4OBQTIPU
    UFTUJOH

11. w ɹɹɹ"7"΍ɹɹ+FTU͕αϙʔτ
    w ίϯϙʔωϯτͷϨϯμϦϯά݁Ռ TOBQTIPU ΛKTPOͰอଘ
    
    
    
    લճ݁ՌΛਖ਼ͱ͠ࠓճ݁Ռͱൺֱɺࠩ෼͕ग़ͨ৔߹ɺࣦഊͱ͢Δ
    4OBQTIPU
    5FTUJOH
    

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

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

    Difference: <h1> - Hello World..!? + Hello World! </h1> "7"Ͱͷ࢖༻ྫ
    A)FMMP
    8PSMEA
    
    A)FMMP
    8PSME A
    มߋ࣌ςετ݁Ռ

14. ྑ͍

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

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

17. 7JTVBM
    UFTUJOH

18. w ςετ࣌ʹίϯϙʔωϯτͷϨϯμϦϯά݁ՌΛը૾Ωϟ ϓνϟΛऔಘɺҎલQBTTͨ͠ը૾Λਖ਼ͱ͠ࠓճ݁Ռͱൺ ֱɺࠩ෼͕ग़ͨ৔߹ɺࣦഊͱ͢Δ
    w ཁ͸લड़ͷ4OBQTIPU
    5FTUJOHͷը૾൛ 7JTVBM
    5FTUJOH
    

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

20. ٹ͍͍ͨྫ
    Search large… ! ŝƄŒŖ ݕࡧ 
    ίϯϙʔωϯτʹมߋ͕ೖͬͨࡍʹɺมߋ͞ΕͨίϯϙʔωϯτΛ
    
    
    
    
    ࢖༻͍ͯ͠Δ਌ίϯϙʔωϯτͷݟͨ໨·Ͱ֬ೝ͕Ͱ͖Δ ྫ
    4FBSDI'PSNKTY

    
    ҙਤͤͣൃੜ্ͨ͠هͷΑ͏ͳέʔεʹؾ͖͍ͮͨ

21. %&.0

22. 
    Ұ౓໨ࢹͰ֬ೝ͸ඞཁ͕ͩࡉʑͨ͠Ξαʔγϣϯ͕͍Βͳ͍
    
    ݟͨ໨΋ؚΊͯςετ͕Մೳ
    
    ࢠίϯϙʔωϯτͷมߋʹΑΔ਌ίϯϙʔωϯτͷݟͨ໨
    
    
    
    
    ͷࠩ෼·Ͱݕग़Ͱ͖Δ
    
    
    
    
    
    
    
    ؀ڥͷߏங͕େม
    ޙड़
    䠼
    ࣮%0.ςετ
    
    εΫϦʔϯγϣοτΛͱΔ࢓૊Έ͕ඞཁ
    ޙड़

    
    
    ϑϧϨϯμϦϯάͳͷͰॏ͍
    ΍ͬͯΈͯ
    

23. ࣮ફ7JTVBM
    5FTUJOH

24. ᶃ
    
    ςετ࣌ʹίϯϙʔωϯτͷTDSFFOTIPUΛอଘ͢Δ
    ᶄ
    
    (JUͷཤྺΛ୧ͬͯɺൺֱର৅ FYQFDUFE ͱ͢ΔTDSFFOTIPUΛ

    
    
    
    
    4͔Βμ΢ϯϩʔυ͢Δ
    ᶅ
    
    ࠓճͷTDSFFOTIPU BDUVBM ͱFYQFDUFEͷൺֱΛߦ͏
    ᶆ
    
    ࠓճͷTDSFFOTIPU BDUVBM

    ͱEJ⒎ը૾ͱIUNMϨϙʔτΛHJUͷ
    
    
    
    
    
    DPNNJU
    IBTIΛΩʔʹ4ʹΞοϓϩʔυ
    
    
    
    
    
    BDUVBM͸࣍ճҎ߱ͷFYQFDUFEީิͱͳΔ
    ᶇ
    
    4MBDLɺHJUIVCʹ݁ՌΛ௨஌
    $*ͰͷྲྀΕ
    

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

    
    
    
    
    
    
    
    
    
    ཁ͸FMFDUSPOͷSFOEFSFSʹඳը͠ɺTDSFFOTIPUΛࡱΔ࡞ઓ

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

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

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

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

    4MBDL௨஌
    w HJUIVC௨஌
    

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

31. ൵͍ࣦ͠ഊྫͱ஫ҙ఺

32. ൵͍ࣦ͠ഊྫ
    BDUVBM FYQFDUFE EJ⒎ * { transition: none !important; animation:

    none !important; }
    Ϙλϯ͕ΞΫςΟϒʹͳͬͨࡍͷUSBOTJUJPOͰඍົʹ৭ҧ͏
    
    
    
    
    
    UFTUͷpYUVSFIUNMʹҎԼΛಥͬࠐΜͩ ʂʁ
    

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

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

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