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

Connect.Tech 2018: Effective React Testing

Connect.Tech 2018: Effective React Testing

Building applications with React is a cinch these days. But what about testing? In this talk, learn how to create an effective plan for testing a React and Redux application from the ground up. You will learn about the testing framework Jest, how to unit test React components with logic, the magic and trade-offs of snapshot testing, how to test Redux, and how to end-to-end test your entire application. You will leave this talk ready to effectively test your React applications.

Jeremy Fairbank

October 19, 2018
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

  1. Effective React
    Testing
    Jeremy Fairbank
    @elpapapollo

    View full-size slide

  2. @testdouble helps improves
    how the world build software.
    testdouble.com/agency

    View full-size slide

  3. bit.ly/programming-elm

    View full-size slide

  4. My shiny new React application…

    View full-size slide

  5. …without tests.

    View full-size slide

  6. redux-thunk
    +

    View full-size slide

  7. Components
    Test expected output.

    View full-size slide

  8. Reducer
    Test state changes as expected.

    View full-size slide

  9. Actions
    Test actions through reducer tests.
    Test thunks for coordination.

    View full-size slide

  10. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  11. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  12. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  13. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  14. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  15. Jest
    facebook.github.io/jest

    View full-size slide

  16. 1. Automatic with create-react-app
    2. Or add yourself:

    yarn add jest

    npm install --save jest

    View full-size slide

  17. Enzyme
    JavaScript testing utilities for React.
    github.com/airbnb/enzyme
    yarn add enzyme enzyme-adapter-react-16

    View full-size slide

  18. TDD with Components
    name="Jeremy"
    employer="Test Double"
    />
    expect
    "Hello. I'm Jeremy from Test Double."

    View full-size slide

  19. Unit Tests Recap

    View full-size slide

  20. Unit Tests Recap

    View full-size slide

  21. Unit Tests Recap
    Easy to write

    View full-size slide

  22. Unit Tests Recap
    Easy to write
    Fast

    View full-size slide

  23. Unit Tests Recap
    Easy to write
    Fast
    Isolated design feedback

    View full-size slide

  24. Unit Tests Recap
    Easy to write
    Fast
    Isolated design feedback

    View full-size slide

  25. Unit Tests Recap
    Easy to write
    Fast
    Isolated design feedback
    Tedious to test all components

    View full-size slide

  26. Unit Tests Recap
    Easy to write
    Fast
    Isolated design feedback
    Tedious to test all components
    Coupled to implementation

    View full-size slide

  27. Unit Tests Recap
    Easy to write
    Fast
    Isolated design feedback
    Tedious to test all components
    Coupled to implementation
    No interaction with other
    components

    View full-size slide

  28. Snapshot Tests Recap

    View full-size slide

  29. Snapshot Tests Recap

    View full-size slide

  30. Snapshot Tests Recap

    Easily test component tree

    View full-size slide

  31. Snapshot Tests Recap

    Easily test component tree
    Fast

    View full-size slide

  32. Snapshot Tests Recap

    Easily test component tree
    Fast
    Fill in test gaps quickly

    View full-size slide

  33. Snapshot Tests Recap

    Easily test component tree
    Fast
    Fill in test gaps quickly
    Regression safety

    View full-size slide

  34. Snapshot Tests Recap

    Easily test component tree
    Fast
    Fill in test gaps quickly
    Regression safety

    View full-size slide

  35. Snapshot Tests Recap

    Easily test component tree
    Fast
    Fill in test gaps quickly
    Regression safety
    No design feedback

    View full-size slide

  36. Snapshot Tests Recap

    Easily test component tree
    Fast
    Fill in test gaps quickly
    Regression safety
    No design feedback
    Break from markup changes

    View full-size slide

  37. Snapshot Tests Recap

    Easily test component tree
    Fast
    Fill in test gaps quickly
    Regression safety
    No design feedback
    Break from markup changes
    Prone to human error

    View full-size slide

  38. Integration Tests Recap

    View full-size slide

  39. Integration Tests Recap
    ⚙⚙

    View full-size slide

  40. Integration Tests Recap

    Test component’s
    interaction with child
    components

    View full-size slide

  41. Integration Tests Recap

    Test component’s
    interaction with child
    components

    View full-size slide

  42. Integration Tests Recap

    Test component’s
    interaction with child
    components
    Coupled to child component
    implementation

    View full-size slide

  43. Integration Tests Recap

    Test component’s
    interaction with child
    components
    Coupled to child component
    implementation
    Redundant test coverage

    View full-size slide

  44. Integration Tests Recap

    Test component’s
    interaction with child
    components
    Coupled to child component
    implementation
    Redundant test coverage
    Harder to debug

    View full-size slide

  45. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  46. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  47. Reducer
    Action
    New
    State
    State
    Testing Redux

    View full-size slide

  48. Unit Tests “Redux”

    View full-size slide

  49. Unit Tests “Redux”

    View full-size slide

  50. Unit Tests “Redux”
    Easier to write
    Fast
    Isolated design feedback

    View full-size slide

  51. Unit Tests “Redux”
    Easier to write
    Fast
    Isolated design feedback

    View full-size slide

  52. Unit Tests “Redux”
    Easier to write
    Fast
    Isolated design feedback
    Thunk tests coupled to
    implementation

    View full-size slide

  53. Unit Tests “Redux”
    Easier to write
    Fast
    Isolated design feedback
    Thunk tests coupled to
    implementation
    No interaction with the rest
    of the application

    View full-size slide

  54. Integration Tests “Redux”

    View full-size slide

  55. Integration Tests “Redux”
    ⚙⚙

    View full-size slide

  56. Integration Tests “Redux”

    Test reducer, actions, and
    API library together

    View full-size slide

  57. Integration Tests “Redux”

    Test reducer, actions, and
    API library together
    Test entire application

    View full-size slide

  58. Integration Tests “Redux”

    Test reducer, actions, and
    API library together
    Test entire application

    View full-size slide

  59. Integration Tests “Redux”

    Test reducer, actions, and
    API library together
    Test entire application
    More setup

    View full-size slide

  60. Integration Tests “Redux”

    Test reducer, actions, and
    API library together
    Test entire application
    More setup
    Harder to debug

    View full-size slide

  61. Integration Tests “Redux”

    Test reducer, actions, and
    API library together
    Test entire application
    More setup
    Harder to debug
    Doesn’t test user interaction

    View full-size slide

  62. End-to-end Testing

    View full-size slide

  63. Test entire application in browser
    End-to-end Testing

    View full-size slide

  64. Test entire application in browser
    Simulate user interactions
    End-to-end Testing

    View full-size slide

  65. Test entire application in browser
    Simulate user interactions
    Interact with a real API (with test data)
    End-to-end Testing

    View full-size slide

  66. Test entire application in browser
    Simulate user interactions
    Interact with a real API (with test data)
    Focus on happy path
    End-to-end Testing

    View full-size slide

  67. yarn add cypress

    View full-size slide

  68. E2E Tests Recap

    View full-size slide

  69. E2E Tests Recap

    View full-size slide

  70. E2E Tests Recap
    Test all pieces working
    together in user scenarios

    View full-size slide

  71. E2E Tests Recap
    Test all pieces working
    together in user scenarios
    Cypress makes E2E
    pleasant and easier to
    debug

    View full-size slide

  72. E2E Tests Recap
    Test all pieces working
    together in user scenarios
    Cypress makes E2E
    pleasant and easier to
    debug

    View full-size slide

  73. E2E Tests Recap
    Test all pieces working
    together in user scenarios
    Cypress makes E2E
    pleasant and easier to
    debug
    Slow

    View full-size slide

  74. E2E Tests Recap
    Test all pieces working
    together in user scenarios
    Cypress makes E2E
    pleasant and easier to
    debug
    Slow
    Break from markup changes
    or pepper source code with
    identifiers

    View full-size slide

  75. E2E Tests Recap
    Test all pieces working
    together in user scenarios
    Cypress makes E2E
    pleasant and easier to
    debug
    Slow
    Break from markup changes
    or pepper source code with
    identifiers
    Still harder to debug than
    unit tests

    View full-size slide

  76. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View full-size slide

  77. Snapshot
    E2E
    Integration
    Unit
    $$$
    $

    View full-size slide

  78. Write tests!

    View full-size slide

  79. Thank you!
    Jeremy Fairbank
    @elpapapollo
    Slides: bit.ly/react-testing-ct
    Code: github.com/jfairbank/effective-react-testing

    View full-size slide