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

414db81dca21f468b4d7acd88172370c?s=128

Michele Bertoli

April 21, 2017
Tweet

Transcript

  1. TEST LIKE IT’S 2017 @MicheleBertoli

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

    Patterns and Best Practices Follow me @MicheleBertoli
  3. Testing

  4. Devs who think tests are useful Devs who test their

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

    we aren't writing tests right now because we're focusing on building features.”
  6. Testing is hard

  7. Time consuming

  8. Complex to setup

  9. False negatives

  10. #TestingFatigue

  11. Testing is important

  12. Catching bugs

  13. Confidence

  14. Documentation

  15. Testing is evolving

  16. Dan Abramov, Jul 2016 “Unpopular opinion: component unit testing is

    overrated.”
  17. Guillermo Rauch, Dec 2016 “Write tests. Not too many. Mostly

    integration.”
  18. Mike Cohn, 2009

  19. Dmitrii Abramov, 2016

  20. jest

  21. Zero configuration Fast and sandboxed Instant feedback

  22. Built-in code coverage reports Powerful mocking library Works with TypeScript

  23. Snapshot testing

  24. Capture snapshots of React trees or other serializable values to

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

    <button className={primary ? 'btn--primary' : 'btn--secondary'} disabled={disabled} > {text} </button> )
  26. 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!') })
  27. test('test-renderer', () => { const tree = renderer.create( <Button disabled

    primary text="Click me!" />, ).toJSON() expect(tree).toMatchSnapshot() })
  28. exports[`test-renderer 1`] = ` <button className="btn--primary" disabled={true} > Click me!

    </button> `;
  29. <button - className="btn--primary" + className="button--primary" disabled={true} > Click me! </button>

  30. 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.
  31. Common MISCONCEPTIONS

  32. Commit your snapshots

  33. Different from VRT

  34. Any serializable value

  35. Jest styled components

  36. import styled from 'styled-components' const Button = styled.button` color: blue;

    `
  37. exports[`my button is blue 1`] = ` <button className="jVDqcL" />

    `;
  38. Did my component change?

  39. -<button +<div className="jVDqcL" />

  40. Did my styles change?

  41. <button - className="jVDqcL" + className="jldpnK" />

  42. How did my styles change?

  43. import { matcher, serializer } from 'jest-styled-components' expect.addSnapshotSerializer(serializer) expect.extend(matcher) expect(tree).toMatchStyledComponentsSnapshot()

  44. exports[`my button is blue 1`] = ` .jVDqcL { color:

    blue; } <button className="jVDqcL" /> `;
  45. - .jVDqcL { - color: blue; + .jldpnK { +

    color: red; }
  46. Follow @fbjest Star facebook/jest Run a codemod

  47. What’s next?

  48. Michele Bertoli, Dec 2016 “The best testing strategy is not

    writing tests.”
  49. You can’t have failing tests, if you don’t write any

    test.
  50. snapguidist

  51. Primary Secondary Disabled test('btn primary', () => {}) test('btn secondary,

    () => {}) test('btn disabled, () => {})
  52. React Styleguidist Style guide generator & component workbench for React.

  53. Demo

  54. React fix it

  55. Reproduce the issue in the browser Reproduce the issue in

    the test env Collect information Fix the bug
  56. Demo

  57. Recap

  58. Find a painless way to write tests Write moar tests

    Have fun!
  59. Any question?