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 Slide

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

    View Slide

  3. bit.ly/programming-elm

    View Slide

  4. My shiny new React application…

    View Slide

  5. …without tests.

    View Slide

  6. View Slide

  7. View Slide

  8. API
    Design

    View Slide

  9. Refactoring

    View Slide

  10. ?

    View Slide

  11. redux-thunk
    +

    View Slide

  12. Components
    Test expected output.

    View Slide

  13. Reducer
    Test state changes as expected.

    View Slide

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

    View Slide

  15. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  16. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  17. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  18. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  19. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  20. View Slide

  21. Jest
    facebook.github.io/jest

    View Slide

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

    yarn add jest

    npm install --save jest

    View Slide

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

    View Slide

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

    View Slide

  25. DEMO

    View Slide

  26. Unit Tests Recap

    View Slide

  27. Unit Tests Recap

    View Slide

  28. Unit Tests Recap
    Easy to write

    View Slide

  29. Unit Tests Recap
    Easy to write
    Fast

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. Snapshot Tests Recap

    View Slide

  36. Snapshot Tests Recap

    View Slide

  37. Snapshot Tests Recap

    Easily test component tree

    View Slide

  38. Snapshot Tests Recap

    Easily test component tree
    Fast

    View Slide

  39. Snapshot Tests Recap

    Easily test component tree
    Fast
    Fill in test gaps quickly

    View Slide

  40. Snapshot Tests Recap

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

    View Slide

  41. Snapshot Tests Recap

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

    View Slide

  42. Snapshot Tests Recap

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

    View Slide

  43. Snapshot Tests Recap

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

    View Slide

  44. 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 Slide

  45. Integration Tests Recap

    View Slide

  46. Integration Tests Recap
    ⚙⚙

    View Slide

  47. Integration Tests Recap

    Test component’s
    interaction with child
    components

    View Slide

  48. Integration Tests Recap

    Test component’s
    interaction with child
    components

    View Slide

  49. Integration Tests Recap

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

    View Slide

  50. Integration Tests Recap

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

    View Slide

  51. Integration Tests Recap

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

    View Slide

  52. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  53. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  54. Reducer
    Action
    New
    State
    State
    Testing Redux

    View Slide

  55. DEMO

    View Slide

  56. Unit Tests “Redux”

    View Slide

  57. Unit Tests “Redux”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  62. Integration Tests “Redux”

    View Slide

  63. Integration Tests “Redux”
    ⚙⚙

    View Slide

  64. Integration Tests “Redux”

    Test reducer, actions, and
    API library together

    View Slide

  65. Integration Tests “Redux”

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

    View Slide

  66. Integration Tests “Redux”

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

    View Slide

  67. Integration Tests “Redux”

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

    View Slide

  68. Integration Tests “Redux”

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

    View Slide

  69. Integration Tests “Redux”

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

    View Slide

  70. End-to-end Testing

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. 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 Slide

  75. yarn add cypress

    View Slide

  76. DEMO

    View Slide

  77. E2E Tests Recap

    View Slide

  78. E2E Tests Recap

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. 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 Slide

  84. 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 Slide

  85. E2E
    Integration
    Unit
    Snapshot
    $$$
    $

    View Slide

  86. Snapshot
    E2E
    Integration
    Unit
    $$$
    $

    View Slide

  87. Write tests!

    View Slide

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

    View Slide