Upgrade to Pro — share decks privately, control downloads, hide ads and more …

component test

bokuweb
July 30, 2017
4.8k

component test

Kyoto.js 13の発表資料です

bokuweb

July 30, 2017
Tweet

Transcript

  1. ۪௚ʹΞαʔτ ҎԼ͸&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'); }); });
  2. "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ͱ͢Δ
  3. 10: ).toJSON(); 11: t.snapshot(tree); 12: }); Did not match snapshot

    Difference: <h1> - Hello World..!? + Hello World! </h1> "7"Ͱͷ࢖༻ྫ A)FMMP8PSMEAA)FMMP8PSME Aมߋ࣌ςετ݁Ռ
  4. ᶃςετ࣌ʹίϯϙʔωϯτͷTDSFFOTIPUΛอଘ͢Δ ᶄ(JUͷཤྺΛ୧ͬͯɺൺֱର৅ FYQFDUFE ͱ͢ΔTDSFFOTIPUΛ
 4͔Βμ΢ϯϩʔυ͢Δ ᶅࠓճͷTDSFFOTIPU BDUVBM ͱFYQFDUFEͷൺֱΛߦ͏ ᶆࠓճͷTDSFFOTIPU BDUVBM

    ͱEJ⒎ը૾ͱIUNMϨϙʔτΛHJUͷ DPNNJUIBTIΛΩʔʹ4ʹΞοϓϩʔυ  BDUVBM͸࣍ճҎ߱ͷFYQFDUFEީิͱͳΔ  ᶇ4MBDLɺHJUIVCʹ݁ՌΛ௨஌ $*ͰͷྲྀΕ
  5. ςετ࣌ͷ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͕อଘ͞ΕΔ
  6. ൵͍ࣦ͠ഊྫ BDUVBM FYQFDUFE EJ⒎ * { transition: none !important; animation:

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