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

React Hooks broke my tests, now what? - CityJS ...

React Hooks broke my tests, now what? - CityJS London 2023

Hooks have become a better and cleaner way to write React code. Many have realized it and migrated their solutions from class to functional components. When the code looks great, and the migration seems successful, your tests may disagree. This presentation focuses on the common pitfalls of testing and what we have been doing wrong while also teaching you how to test your components, all this while using the React Testing Library.

Daniel Afonso

March 31, 2023
Tweet

More Decks by Daniel Afonso

Other Decks in Programming

Transcript

  1. Implementation details are things which users of your code will

    not typically use, see, or even know about. - Kent C. Dodds https://kentcdodds.com/blog/testing- implementation-details
  2. @danieljcafonso 24 The testing shift Render the entire component Search

    like the user See if are on the right tab Is the data on the dropdown
  3. @danieljcafonso 32 What do we need to know? Queries 01

    02 03 Firing Events Utils queryBy*
  4. @danieljcafonso 33 What do we need to know? Queries 01

    02 03 Firing Events Utils queryBy* getBy*
  5. @danieljcafonso 34 What do we need to know? Queries 01

    02 03 Firing Events Utils queryBy* getBy* findBy*
  6. @danieljcafonso 35 What do we need to know? Queries 01

    02 03 Firing Events Utils queryAllBy* getAllBy* findAllBy*
  7. @danieljcafonso 37 What do we need to know? Queries 01

    02 03 Firing Events Utils Queries Accessible to Everyone
  8. @danieljcafonso 38 What do we need to know? Queries 01

    02 03 Firing Events Utils Queries Accessible to Everyone Semantic Queries
  9. @danieljcafonso 39 What do we need to know? Queries 01

    02 03 Firing Events Utils Queries Accessible to Everyone Semantic Queries Test IDs
  10. @danieljcafonso 40 What do we need to know? Queries 01

    02 03 Firing Events Utils Queries Accessible to Everyone Semantic Queries Test IDs Manual Queries
  11. @danieljcafonso Queries Accessible to Everyone Semantic Queries Test IDs Manual

    Queries 41 What do we need to know? Queries 01 02 03 Firing Events Utils Start here
  12. @danieljcafonso 42 What do we need to know? Queries 01

    02 03 Firing Events Utils Queries Accessible to Everyone *ByLabelText, *ByPlaceholderText,*ByRole, *ByDisplayValue, *ByText
  13. @danieljcafonso 43 What do we need to know? Queries 01

    02 03 Firing Events Utils Queries Accessible to Everyone
  14. @danieljcafonso 44 What do we need to know? Queries 01

    02 03 Firing Events Utils Semantic Queries *ByAltText, *ByTitle
  15. @danieljcafonso 45 What do we need to know? Queries 01

    02 03 Firing Events Utils Semantic Queries
  16. @danieljcafonso 46 What do we need to know? Queries 01

    02 03 Firing Events Utils Test IDs *ByTestId
  17. @danieljcafonso 47 What do we need to know? Queries 01

    02 03 Firing Events Utils Test IDs
  18. @danieljcafonso 48 What do we need to know? Queries 01

    02 03 Firing Events Utils Manual Queries querySelector DOM API
  19. @danieljcafonso 49 What do we need to know? Queries 01

    02 03 Firing Events Utils Manual Queries
  20. @danieljcafonso 50 What do we need to know? Queries 01

    02 03 Firing Events Utils https://testing-playground.com/
  21. @danieljcafonso 51 What do we need to know? Queries 01

    02 03 Firing Events Utils fireEvent
  22. @danieljcafonso 52 What do we need to know? Queries 01

    02 03 Firing Events Utils user-event
  23. @danieljcafonso 53 What do we need to know? Queries 01

    02 03 Firing Events Utils waitFor
  24. @danieljcafonso 54 What do we need to know? Queries 01

    02 03 Firing Events Utils waitForElementToBeRemoved
  25. @danieljcafonso 58 Common mistakes • Using act • Using getBy

    with expect().not.toBeInTheDocument() • Using await with fireEvent or non async queries • Using await waitFor() • Using cleanup • Using waitFor with synchronous queries • Using side effects inside waitFor
  26. 81 Scan Me Daniel Afonso React Hooks broke my tests,

    now what? Thank you! @danieljcafonso