$30 off During Our Annual Pro Sale. View Details »

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. TEST LIKE IT’S 2017
    @MicheleBertoli

    View Slide

  2. Mee-keh-leh
    Front End Engineer at Facebook
    Author of React Design Patterns and Best Practices
    Follow me @MicheleBertoli

    View Slide

  3. Testing

    View Slide

  4. Devs who think tests are useful
    Devs who test their code
    Devs who think they have enough tests

    View Slide

  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.”

    View Slide

  6. Testing is hard

    View Slide

  7. Time consuming

    View Slide

  8. Complex to setup

    View Slide

  9. False negatives

    View Slide

  10. #TestingFatigue

    View Slide

  11. Testing is important

    View Slide

  12. Catching bugs

    View Slide

  13. Confidence

    View Slide

  14. Documentation

    View Slide

  15. Testing is evolving

    View Slide

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

    View Slide

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

    View Slide

  18. Mike Cohn, 2009

    View Slide

  19. Dmitrii Abramov, 2016

    View Slide

  20. jest

    View Slide

  21. Zero configuration
    Fast and sandboxed
    Instant feedback

    View Slide

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

    View Slide

  23. Snapshot testing

    View Slide

  24. Capture snapshots of React trees or other
    serializable values to simplify UI testing and
    to analyze how state changes over time.

    View Slide

  25. const Button = ({ disabled, primary, text }) => (
    className={primary ? 'btn--primary' : 'btn--secondary'}
    disabled={disabled}
    >
    {text}

    )

    View Slide

  26. test('enzyme', () => {
    const wrapper = shallow(
    ,
    )
    expect(wrapper.prop('disabled')).toBe(true)
    expect(wrapper.hasClass('btn--primary')).toBe(true)
    expect(wrapper.text()).toBe('Click me!')
    })

    View Slide

  27. test('test-renderer', () => {
    const tree = renderer.create(
    ,
    ).toJSON()
    expect(tree).toMatchSnapshot()
    })

    View Slide

  28. exports[`test-renderer 1`] = `
    className="btn--primary"
    disabled={true}
    >
    Click me!

    `;

    View Slide

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

    View Slide

  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.

    View Slide

  31. Common MISCONCEPTIONS

    View Slide

  32. Commit your snapshots

    View Slide

  33. Different from VRT

    View Slide

  34. Any serializable value

    View Slide

  35. Jest styled components

    View Slide

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

    View Slide

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

    View Slide

  38. Did my component change?

    View Slide

  39. -+className="jVDqcL"
    />

    View Slide

  40. Did my styles change?

    View Slide

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

    View Slide

  42. How did my styles change?

    View Slide

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

    View Slide

  44. exports[`my button is blue 1`] = `
    .jVDqcL {
    color: blue;
    }
    className="jVDqcL"
    />
    `;

    View Slide

  45. - .jVDqcL {
    - color: blue;
    + .jldpnK {
    + color: red;
    }

    View Slide

  46. Follow @fbjest
    Star facebook/jest
    Run a codemod

    View Slide

  47. What’s next?

    View Slide

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

    View Slide

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

    View Slide

  50. snapguidist

    View Slide

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

    View Slide

  52. React Styleguidist
    Style guide generator & component
    workbench for React.

    View Slide

  53. Demo

    View Slide

  54. React fix it

    View Slide

  55. Reproduce the
    issue in the browser
    Reproduce the
    issue in the test env
    Collect information
    Fix the bug

    View Slide

  56. Demo

    View Slide

  57. Recap

    View Slide

  58. Find a painless way to write tests
    Write moar tests
    Have fun!

    View Slide

  59. Any question?

    View Slide