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. ?

  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