component test

83c268781ec54605af1f7b866d7de3ad?s=47 bokuweb
July 30, 2017
3.8k

component test

Kyoto.js 13の発表資料です

83c268781ec54605af1f7b866d7de3ad?s=128

bokuweb

July 30, 2017
Tweet

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. 4OBQTIPUUFTUJOH

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

  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)FMMP8PSMEAA)FMMP8PSME Aมߋ࣌ςετ݁Ռ
  14. ྑ͍

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

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

  17. 7JTVBMUFTUJOH

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

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

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

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

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

     ϑϧϨϯμϦϯάͳͷͰॏ͍ ΍ͬͯΈͯ
  23. ࣮ફ7JTVBM5FTUJOH

  24. ᶃςετ࣌ʹίϯϙʔωϯτͷTDSFFOTIPUΛอଘ͢Δ ᶄ(JUͷཤྺΛ୧ͬͯɺൺֱର৅ FYQFDUFE ͱ͢ΔTDSFFOTIPUΛ
 4͔Βμ΢ϯϩʔυ͢Δ ᶅࠓճͷTDSFFOTIPU BDUVBM ͱFYQFDUFEͷൺֱΛߦ͏ ᶆࠓճͷTDSFFOTIPU BDUVBM

    ͱEJ⒎ը૾ͱIUNMϨϙʔτΛHJUͷ DPNNJUIBTIΛΩʔʹ4ʹΞοϓϩʔυ  BDUVBM͸࣍ճҎ߱ͷFYQFDUFEީิͱͳΔ  ᶇ4MBDLɺHJUIVCʹ݁ՌΛ௨஌ $*ͰͷྲྀΕ
  25. ςετ࣌ͷTDSFFOTIPUอଘ ࣮%0.ʹϨϯμϦϯάͭͭ͠εΫϦʔϯγϣοτΛࡱΔඞཁ͕͋Δ w LBSNBOJHIUNBSF /JHIUNBSFΛىಈ͢ΔLBSNBϓϥάΠϯ w "WBSPO "7"ΛFMFDUSPO্ͷQSPDFTTͰಈ࡞ͤ͞ΔϞδϡʔϧ  લड़ͷTOBQTIPUUFTUJOH΋ซ༻Մೳ

     ཁ͸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 ର৅ͷDPNNJUIBTIΛಛఆ͠ɺͦΕΛΩʔʹ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 DSFBUFECZ!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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠