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.

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

October 19, 2018
Tweet

Transcript

  1. Effective React Testing Jeremy Fairbank @elpapapollo

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

  3. 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-ct Code: github.com/jfairbank/effective-react-testing