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
Slide 20
Slide 20 text
@danieljcafonso 20
The testing shift
Slide 21
Slide 21 text
@danieljcafonso 21
The testing shift
Render the entire component
Slide 22
Slide 22 text
@danieljcafonso 22
The testing shift
Render the entire component
Search like the user
Slide 23
Slide 23 text
@danieljcafonso 23
The testing shift
Render the entire component
Search like the user
See if are on the right tab
Slide 24
Slide 24 text
@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
Slide 25
Slide 25 text
@danieljcafonso 25
Think like the user
Slide 26
Slide 26 text
@danieljcafonso 26
Testing Library
Slide 27
Slide 27 text
@danieljcafonso 27
What do we need to know?
Slide 28
Slide 28 text
@danieljcafonso 28
What do we need to know?
Queries
01
Slide 29
Slide 29 text
@danieljcafonso 29
What do we need to know?
Queries
01
02 Firing Events
Slide 30
Slide 30 text
@danieljcafonso 30
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Slide 31
Slide 31 text
@danieljcafonso 31
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Slide 32
Slide 32 text
@danieljcafonso 32
What do we need to know?
Queries
01
02
03
Firing Events
Utils
queryBy*
Slide 33
Slide 33 text
@danieljcafonso 33
What do we need to know?
Queries
01
02
03
Firing Events
Utils
queryBy*
getBy*
Slide 34
Slide 34 text
@danieljcafonso 34
What do we need to know?
Queries
01
02
03
Firing Events
Utils
queryBy*
getBy*
findBy*
Slide 35
Slide 35 text
@danieljcafonso 35
What do we need to know?
Queries
01
02
03
Firing Events
Utils
queryAllBy*
getAllBy*
findAllBy*
Slide 36
Slide 36 text
@danieljcafonso 36
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Slide 37
Slide 37 text
@danieljcafonso 37
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Queries Accessible to Everyone
Slide 38
Slide 38 text
@danieljcafonso 38
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Queries Accessible to Everyone
Semantic Queries
Slide 39
Slide 39 text
@danieljcafonso 39
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Queries Accessible to Everyone
Semantic Queries
Test IDs
Slide 40
Slide 40 text
@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
Slide 41
Slide 41 text
@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
Slide 42
Slide 42 text
@danieljcafonso 42
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Queries Accessible to Everyone
*ByLabelText, *ByPlaceholderText,*ByRole,
*ByDisplayValue, *ByText
Slide 43
Slide 43 text
@danieljcafonso 43
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Queries Accessible to Everyone
Slide 44
Slide 44 text
@danieljcafonso 44
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Semantic Queries
*ByAltText, *ByTitle
Slide 45
Slide 45 text
@danieljcafonso 45
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Semantic Queries
Slide 46
Slide 46 text
@danieljcafonso 46
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Test IDs
*ByTestId
Slide 47
Slide 47 text
@danieljcafonso 47
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Test IDs
Slide 48
Slide 48 text
@danieljcafonso 48
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Manual Queries
querySelector DOM API
Slide 49
Slide 49 text
@danieljcafonso 49
What do we need to know?
Queries
01
02
03
Firing Events
Utils
Manual Queries
Slide 50
Slide 50 text
@danieljcafonso 50
What do we need to know?
Queries
01
02
03
Firing Events
Utils
https://testing-playground.com/
Slide 51
Slide 51 text
@danieljcafonso 51
What do we need to know?
Queries
01
02
03
Firing Events
Utils
fireEvent
Slide 52
Slide 52 text
@danieljcafonso 52
What do we need to know?
Queries
01
02
03
Firing Events
Utils
user-event
Slide 53
Slide 53 text
@danieljcafonso 53
What do we need to know?
Queries
01
02
03
Firing Events
Utils
waitFor
Slide 54
Slide 54 text
@danieljcafonso 54
What do we need to know?
Queries
01
02
03
Firing Events
Utils
waitForElementToBeRemoved
Slide 55
Slide 55 text
@danieljcafonso 55
What do we need to know?
Queries
01
02
03
Firing Events
Utils
screen
Slide 56
Slide 56 text
@danieljcafonso 56
What do we need to know?
Queries
01
02
03
Firing Events
Utils
debug
Slide 57
Slide 57 text
@danieljcafonso 57
What do we need to know?
Queries
01
02
03
Firing Events
Utils
within
Slide 58
Slide 58 text
@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
Slide 59
Slide 59 text
@danieljcafonso 59
Using act
Common Mistakes
Slide 60
Slide 60 text
@danieljcafonso 60
Using act
Common Mistakes
Slide 61
Slide 61 text
@danieljcafonso 61
Using getBy with expect().not.toBeInTheDocument()
Common Mistakes
Slide 62
Slide 62 text
@danieljcafonso 62
Using getBy with expect().not.toBeInTheDocument()
Common Mistakes
Slide 63
Slide 63 text
@danieljcafonso 63
Using await with fireEvent or non async queries
Common Mistakes
Slide 64
Slide 64 text
@danieljcafonso 64
Using await with fireEvent or non async queries
Common Mistakes
Slide 65
Slide 65 text
@danieljcafonso 65
Using await waitFor()
Common Mistakes
Slide 66
Slide 66 text
@danieljcafonso 66
Using await waitFor()
Common Mistakes
Slide 67
Slide 67 text
@danieljcafonso 67
Using cleanup
Common Mistakes
Slide 68
Slide 68 text
@danieljcafonso 68
Using cleanup
Common Mistakes
* if your framework supports the afterEach global
Slide 69
Slide 69 text
@danieljcafonso 69
Using waitFor with synchronous queries
Common Mistakes
Slide 70
Slide 70 text
@danieljcafonso 70
Using waitFor with synchronous queries
Common Mistakes
Slide 71
Slide 71 text
@danieljcafonso 71
Using side effects inside waitFor
Common Mistakes
Slide 72
Slide 72 text
@danieljcafonso 72
Using side effects inside waitFor
Common Mistakes