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

JazzCon 2018: Effective React Testing

JazzCon 2018: Effective React Testing

Jeremy Fairbank

March 22, 2018
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

  1. ?

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

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

    Tedious to test all components Coupled to implementation No interaction with other components
  4. Snapshot Tests Recap Easily test component tree Fast Fill in

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

    test gaps quickly Regression safety No design feedback Break from markup changes
  6. 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
  7. Integration Tests Recap ⚙ Test component’s interaction with child components

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

    Coupled to child component implementation Redundant test coverage Harder to debug ⚙
  9. Unit Tests “Redux” Easier to write Fast Isolated design feedback

    Thunk tests coupled to implementation No interaction with the rest of the application
  10. Integration Tests “Redux” ⚙ Test reducer, actions, and API library

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

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

    together Test entire application More setup Harder to debug Doesn’t test user interaction ⚙
  13. Test entire application in browser Simulate user interactions Interact with

    a real API (with test data) Focus on happy path End-to-end Testing
  14. E2E Tests Recap Test all pieces working together in user

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

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

    scenarios Cypress makes E2E pleasant and easier to debug Slow
  17. 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
  18. 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