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

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