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

Test Like It's 2017

Test Like It's 2017

Testing UIs has always been a hard job. In the components era, there are new tools and solutions available that transform completely the way we approach testing. From snapshots, through end-to-end frameworks, to style guide testing. In this talk, we'll see some modern (and creative) testing solutions.

Cover by pixelandgretel.it

Michele Bertoli

April 21, 2017
Tweet

More Decks by Michele Bertoli

Other Decks in Programming

Transcript

  1. Mee-keh-leh Front End Engineer at Facebook Author of React Design

    Patterns and Best Practices Follow me @MicheleBertoli
  2. Devs who think tests are useful Devs who test their

    code Devs who think they have enough tests
  3. Dmitrii Abramov, Feb 2017 “Saddest thing I hear from engineers:

    we aren't writing tests right now because we're focusing on building features.”
  4. Capture snapshots of React trees or other serializable values to

    simplify UI testing and to analyze how state changes over time.
  5. const Button = ({ disabled, primary, text }) => (

    <button className={primary ? 'btn--primary' : 'btn--secondary'} disabled={disabled} > {text} </button> )
  6. test('enzyme', () => { const wrapper = shallow( <Button disabled

    primary text="Click me!" />, ) expect(wrapper.prop('disabled')).toBe(true) expect(wrapper.hasClass('btn--primary')).toBe(true) expect(wrapper.text()).toBe('Click me!') })
  7. test('test-renderer', () => { const tree = renderer.create( <Button disabled

    primary text="Click me!" />, ).toJSON() expect(tree).toMatchSnapshot() })
  8. Watch Usage › Press o to only run tests related

    to changed files. › Press u to update failing snapshots. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run.
  9. exports[`my button is blue 1`] = ` .jVDqcL { color:

    blue; } <button className="jVDqcL" /> `;
  10. Reproduce the issue in the browser Reproduce the issue in

    the test env Collect information Fix the bug