JazzCon 2018: Effective React Testing

JazzCon 2018: Effective React Testing

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

March 22, 2018
Tweet

Transcript

  1. Effective React Testing Jeremy Fairbank @elpapapollo

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

  3. In beta now! bit.ly/programming-elm

  4. My shiny new React application…

  5. …without tests.

  6. None
  7. None
  8. API Design

  9. Refactoring

  10. ?

  11. redux-thunk +

  12. Components Test expected output.

  13. Reducer Test state changes as expected.

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

  15. E2E Integration Unit Snapshot $$$ $

  16. E2E Integration Unit Snapshot $$$ $

  17. E2E Integration Unit Snapshot $$$ $

  18. E2E Integration Unit Snapshot $$$ $

  19. E2E Integration Unit Snapshot $$$ $

  20. None
  21. Jest facebook.github.io/jest

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

    jest
 npm install --save jest
  23. Enzyme JavaScript testing utilities for React. github.com/airbnb/enzyme yarn add enzyme

    enzyme-adapter-react-16
  24. TDD with Components <NameTag name="Jeremy" employer="Test Double" /> expect "Hello.

    I'm Jeremy from Test Double."
  25. DEMO

  26. Unit Tests Recap

  27. Unit Tests Recap

  28. Unit Tests Recap Easy to write

  29. Unit Tests Recap Easy to write Fast

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

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

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

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

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

    Tedious to test all components Coupled to implementation No interaction with other components
  35. Snapshot Tests Recap

  36. Snapshot Tests Recap

  37. Snapshot Tests Recap Easily test component tree

  38. Snapshot Tests Recap Easily test component tree Fast

  39. Snapshot Tests Recap Easily test component tree Fast Fill in

    test gaps quickly
  40. Snapshot Tests Recap Easily test component tree Fast Fill in

    test gaps quickly Regression safety
  41. Snapshot Tests Recap Easily test component tree Fast Fill in

    test gaps quickly Regression safety
  42. Snapshot Tests Recap Easily test component tree Fast Fill in

    test gaps quickly Regression safety No design feedback
  43. Snapshot Tests Recap Easily test component tree Fast Fill in

    test gaps quickly Regression safety No design feedback Break from markup changes
  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
  45. Integration Tests Recap

  46. Integration Tests Recap ⚙⚙

  47. Integration Tests Recap ⚙ Test component’s interaction with child components

  48. Integration Tests Recap ⚙ Test component’s interaction with child components

  49. Integration Tests Recap ⚙ Test component’s interaction with child components

    Coupled to child component implementation ⚙
  50. Integration Tests Recap ⚙ Test component’s interaction with child components

    Coupled to child component implementation Redundant test coverage ⚙
  51. Integration Tests Recap ⚙ Test component’s interaction with child components

    Coupled to child component implementation Redundant test coverage Harder to debug ⚙
  52. E2E Integration Unit Snapshot $$$ $

  53. E2E Integration Unit Snapshot $$$ $

  54. Reducer Action New State State Testing Redux

  55. DEMO

  56. Unit Tests “Redux”

  57. Unit Tests “Redux”

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

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

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

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

    Thunk tests coupled to implementation No interaction with the rest of the application
  62. Integration Tests “Redux”

  63. Integration Tests “Redux” ⚙⚙

  64. Integration Tests “Redux” ⚙ Test reducer, actions, and API library

    together ⚙
  65. Integration Tests “Redux” ⚙ Test reducer, actions, and API library

    together Test entire application ⚙
  66. Integration Tests “Redux” ⚙ Test reducer, actions, and API library

    together Test entire application ⚙
  67. Integration Tests “Redux” ⚙ Test reducer, actions, and API library

    together Test entire application More setup ⚙
  68. Integration Tests “Redux” ⚙ Test reducer, actions, and API library

    together Test entire application More setup Harder to debug ⚙
  69. Integration Tests “Redux” ⚙ Test reducer, actions, and API library

    together Test entire application More setup Harder to debug Doesn’t test user interaction ⚙
  70. End-to-end Testing

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

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

  73. Test entire application in browser Simulate user interactions Interact with

    a real API (with test data) End-to-end Testing
  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
  75. yarn add cypress

  76. DEMO

  77. E2E Tests Recap

  78. E2E Tests Recap

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

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

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

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

    scenarios Cypress makes E2E pleasant and easier to debug Slow
  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
  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
  85. E2E Integration Unit Snapshot $$$ $

  86. Snapshot E2E Integration Unit $$$ $

  87. Write tests!

  88. Thank you! Jeremy Fairbank @elpapapollo Slides: bit.ly/react-testing-jazzcon Code: bit.ly/react-testing-jazzcon-code