component test

Kyoto.js 13の発表資料です

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. ۪௚ʹΞαʔτ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 4OBQTIPUUFTUJOH
    

    View Slide

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

    View Slide

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

    View Slide

13. 10: ).toJSON();
    11: t.snapshot(tree);
    12: });
    Did not match snapshot
    Difference:
    
    - Hello World..!?
    + Hello World!
    
    "7"Ͱͷ࢖༻ྫ
    A)FMMP8PSMEAA)FMMP8PSME Aมߋ࣌ςετ݁Ռ
    

    View Slide

14. ྑ͍
    

    View Slide

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

    View Slide

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

    View Slide

17. 7JTVBMUFTUJOH
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. %&.0
    

    View Slide

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

    View Slide

23. ࣮ફ7JTVBM5FTUJOH
    

    View Slide

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

    4͔Βμ΢ϯϩʔυ͢Δ
    ᶅࠓճͷTDSFFOTIPU BDUVBM
    ͱFYQFDUFEͷൺֱΛߦ͏
    ᶆࠓճͷTDSFFOTIPU BDUVBM
    ͱEJ⒎ը૾ͱIUNMϨϙʔτΛHJUͷ
    DPNNJUIBTIΛΩʔʹ4ʹΞοϓϩʔυ
    BDUVBM͸࣍ճҎ߱ͷFYQFDUFEީิͱͳΔ
    
    ᶇ4MBDLɺHJUIVCʹ݁ՌΛ௨஌
    $*ͰͷྲྀΕ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide