@@ -72,25 +72,35 @@ Open the extension manager with <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>X</kbd> (W
72
72
73
73
## Cheat Sheet
74
74
75
- | Search Variants | Result |
76
- | ---------------- | --------------------------------------------- |
77
- | ` getBy ` ... | ` Element ` or ` Error ` |
78
- | ` getAllBy ` ... | ` Element[] ` or ` Error ` |
79
- | ` queryBy ` ... | ` Element ` or ` null ` |
80
- | ` queryAllBy ` ... | ` Element[] ` or ` null ` |
81
- | ` findBy ` ... | ` Promise<Element> ` or ` Promise<rejection> ` |
82
- | ` findAllBy ` ... | ` Promise<Element[]> ` or ` Promise<rejection> ` |
83
-
84
- | Search Types | Result |
85
- | --------------------- | --------------------------------------------- |
86
- | ...` Role ` | ` <div aria="role"> ` or [ Aria Roles] ( https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles ) |
87
- | ...` LabelText ` | ` <label for="Text"> ` |
88
- | ...` PlaceHolderText ` | ` <input placeholder="Text"> ` |
89
- | ...` Text ` | ` <a href="/page">Text</a> ` |
90
- | ...` DisplayValue ` | ` <input value="Text"> ` |
91
- | ...` AltText ` | ` <img alt="Text"> ` |
92
- | ...` Title ` | ` <span title="Text"> ` or ` <title> ` |
93
- | ...` TestId ` | ` <input data-testid="Id"> ` |
75
+ You can write any combination of Search variants and Search types.
76
+
77
+ ### Search variants
78
+
79
+ | Variants | Return if no match | Return if 1 match | Return if 1+ match | Await? |
80
+ | --------------- | ------------------ | ----------------- | ------------------ | ------ |
81
+ | ` getBy ` ... | throw | return | throw | No |
82
+ | ` getAllBy ` ... | throw | array | array | No |
83
+ | ` queryBy ` ... | ` null ` | return | throw | No |
84
+ | ` queryAllBy ` ... | ` [] ` | array | array | No |
85
+ | ` findBy ` ... | throw | return | throw | Yes |
86
+ | ` findAllBy ` ... | throw | array | array | Yes |
87
+
88
+ ### Search types
89
+
90
+ Sorted by oficial recommended [ order of priority] ( https://testing-library.com/docs/queries/about/#priority ) .
91
+
92
+ | | Types | finds by... | DOM example |
93
+ | - | --------------------- | -------------------------------- | ------------------------------------- |
94
+ | 1 | ...,` Role ` | [ ARIA role] ( https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles ) | ` <div role="dialog" /> ` |
95
+ | 2 | ...,` LabelText ` | label or aria-label content | ` <label for="element" /> ` |
96
+ | 3 | ...,` PlaceholderText ` | input placeholder value | ` <input placeholder="name" /> ` |
97
+ | 4 | ...,` Text ` | element text content | ` <p>Lorem ipsum</p> ` |
98
+ | 5 | ...,` DisplayValue ` | form element current value | ` <input value="Current Value"> ` |
99
+ | 6 | ...,` AltText ` | img alt attribute | ` <img alt="movie poster" /> ` |
100
+ | 7 | ...,` Title ` | title attribute or svg title tag | ` <span title="Add" /> ` or ` <title /> ` |
101
+ | 8 | ...,` TestId ` | data-testid attribute | ` <div data-testid="some-message" /> ` |
102
+
103
+ > For more information visit the oficial cheat sheet: [ DOM] ( https://testing-library.com/docs/dom-testing-library/cheatsheet ) - [ React] ( https://testing-library.com/docs/react-testing-library/cheatsheet ) - [ Vue] ( https://testing-library.com/docs/vue-testing-library/cheatsheet )
94
104
95
105
⇧ [ Back to menu] ( #menu )
96
106
@@ -118,8 +128,6 @@ Below is a list of all available snippets and the triggers of each one. The `░
118
128
119
129
### Queries
120
130
121
- Sorted by recommended official priority
122
-
123
131
#### 1. Role
124
132
125
133
| Trigger | Result |
0 commit comments