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.

Transcript

1. Hello CityJS @danieljcafonso
2. 2 @danieljcafonso
3. 3 @danieljcafonso
4. 4 @danieljcafonso
5. 5 @danieljcafonso
6. 6 @danieljcafonso
7. 7 @danieljcafonso
8. 8 @danieljcafonso
9. 9 @danieljcafonso
10. React Hooks broke my tests, now what? Daniel Afonso @danieljcafonso 31.03.2023
11. @danieljcafonso www.danieljcafonso.com 11 Daniel Afonso Developer Advocate Egghead.io Instructor Auth0 Ambassador
12. @danieljcafonso www.danieljcafonso.com 12 Daniel Afonso Developer Advocate Egghead.io Instructor Auth0 Ambassador
13. @danieljcafonso 13 The testing issue
14. @danieljcafonso 14 The testing issue
15. @danieljcafonso 15 The testing issue
16. @danieljcafonso 16 The testing issue
17. @danieljcafonso 17 The testing issue
18. @danieljcafonso 18 Testing implementation details
19. 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
20. @danieljcafonso 20 The testing shift
21. @danieljcafonso 21 The testing shift Render the entire component
22. @danieljcafonso 22 The testing shift Render the entire component Search like the user
23. @danieljcafonso 23 The testing shift Render the entire component Search like the user See if are on the right tab
24. @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
25. @danieljcafonso 25 Think like the user
26. @danieljcafonso 26 Testing Library
27. @danieljcafonso 27 What do we need to know?
28. @danieljcafonso 28 What do we need to know? Queries 01
29. @danieljcafonso 29 What do we need to know? Queries 01 02 Firing Events
30. @danieljcafonso 30 What do we need to know? Queries 01 02 03 Firing Events Utils
31. @danieljcafonso 31 What do we need to know? Queries 01 02 03 Firing Events Utils
32. @danieljcafonso 32 What do we need to know? Queries 01 02 03 Firing Events Utils queryBy*
33. @danieljcafonso 33 What do we need to know? Queries 01 02 03 Firing Events Utils queryBy* getBy*
34. @danieljcafonso 34 What do we need to know? Queries 01 02 03 Firing Events Utils queryBy* getBy* findBy*
35. @danieljcafonso 35 What do we need to know? Queries 01 02 03 Firing Events Utils queryAllBy* getAllBy* findAllBy*
36. @danieljcafonso 36 What do we need to know? Queries 01 02 03 Firing Events Utils
37. @danieljcafonso 37 What do we need to know? Queries 01 02 03 Firing Events Utils Queries Accessible to Everyone
38. @danieljcafonso 38 What do we need to know? Queries 01 02 03 Firing Events Utils Queries Accessible to Everyone Semantic Queries
39. @danieljcafonso 39 What do we need to know? Queries 01 02 03 Firing Events Utils Queries Accessible to Everyone Semantic Queries Test IDs
40. @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
41. @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
42. @danieljcafonso 42 What do we need to know? Queries 01 02 03 Firing Events Utils Queries Accessible to Everyone *ByLabelText, *ByPlaceholderText,*ByRole, *ByDisplayValue, *ByText
43. @danieljcafonso 43 What do we need to know? Queries 01 02 03 Firing Events Utils Queries Accessible to Everyone
44. @danieljcafonso 44 What do we need to know? Queries 01 02 03 Firing Events Utils Semantic Queries *ByAltText, *ByTitle
45. @danieljcafonso 45 What do we need to know? Queries 01 02 03 Firing Events Utils Semantic Queries
46. @danieljcafonso 46 What do we need to know? Queries 01 02 03 Firing Events Utils Test IDs *ByTestId
47. @danieljcafonso 47 What do we need to know? Queries 01 02 03 Firing Events Utils Test IDs
48. @danieljcafonso 48 What do we need to know? Queries 01 02 03 Firing Events Utils Manual Queries querySelector DOM API
49. @danieljcafonso 49 What do we need to know? Queries 01 02 03 Firing Events Utils Manual Queries
50. @danieljcafonso 50 What do we need to know? Queries 01 02 03 Firing Events Utils https://testing-playground.com/
51. @danieljcafonso 51 What do we need to know? Queries 01 02 03 Firing Events Utils fireEvent
52. @danieljcafonso 52 What do we need to know? Queries 01 02 03 Firing Events Utils user-event
53. @danieljcafonso 53 What do we need to know? Queries 01 02 03 Firing Events Utils waitFor
54. @danieljcafonso 54 What do we need to know? Queries 01 02 03 Firing Events Utils waitForElementToBeRemoved
55. @danieljcafonso 55 What do we need to know? Queries 01 02 03 Firing Events Utils screen
56. @danieljcafonso 56 What do we need to know? Queries 01 02 03 Firing Events Utils debug
57. @danieljcafonso 57 What do we need to know? Queries 01 02 03 Firing Events Utils within
58. @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
59. @danieljcafonso 59 Using act Common Mistakes
60. @danieljcafonso 60 Using act Common Mistakes
61. @danieljcafonso 61 Using getBy with expect().not.toBeInTheDocument() Common Mistakes
62. @danieljcafonso 62 Using getBy with expect().not.toBeInTheDocument() Common Mistakes
63. @danieljcafonso 63 Using await with fireEvent or non async queries Common Mistakes
64. @danieljcafonso 64 Using await with fireEvent or non async queries Common Mistakes
65. @danieljcafonso 65 Using await waitFor() Common Mistakes
66. @danieljcafonso 66 Using await waitFor() Common Mistakes
67. @danieljcafonso 67 Using cleanup Common Mistakes
68. @danieljcafonso 68 Using cleanup Common Mistakes * if your framework supports the afterEach global
69. @danieljcafonso 69 Using waitFor with synchronous queries Common Mistakes
70. @danieljcafonso 70 Using waitFor with synchronous queries Common Mistakes
71. @danieljcafonso 71 Using side effects inside waitFor Common Mistakes
72. @danieljcafonso 72 Using side effects inside waitFor Common Mistakes
73. @danieljcafonso 73 eslint-plugin-testing-library https://github.com/testing-library/eslint-plugin-testing-library
74. @danieljcafonso 74 was not wrapped in act(...)
75. @danieljcafonso 75 was not wrapped in act(...)
76. @danieljcafonso 76 was not wrapped in act(...)
77. @danieljcafonso 77 was not wrapped in act(...)
78. @danieljcafonso 78 was not wrapped in act(...)
79. @danieljcafonso 79 was not wrapped in act(...)
80. @danieljcafonso 80
81. 81 Scan Me Daniel Afonso React Hooks broke my tests, now what? Thank you! @danieljcafonso