@@ -121,30 +121,9 @@ properties:
121
121
122
122
The containing DOM node of your rendered React Element (rendered using
123
123
` ReactDOM.render ` ). It's a ` div ` . This is a regular DOM node, so you can call
124
- ` container.querySelector ` etc. to inspect the children. Tip: To get the root
125
- element of your rendered element, use ` container.firstChild ` .
124
+ ` container.querySelector ` etc. to inspect the children.
126
125
127
- <!--
128
- someday maybe we'll expose these, but for now they don't encourage the kinds of
129
- testing practices we want to encourage so we'll leave them off.
130
-
131
- #### query
132
-
133
- A pre-bound version of `container.querySelector(yourQuery)`
134
-
135
- ```javascript
136
- const firstLiInDiv = query('div li')
137
- ```
138
-
139
- #### `queryAll`
140
-
141
- A pre-bound version of `container.querySelectorAll(yourQuery)`
142
-
143
- ```javascript
144
- const allLisInDiv = query('div li')
145
- ```
146
-
147
- -->
126
+ > Tip: To get the root element of your rendered element, use ` container.firstChild ` .
148
127
149
128
#### ` queryByTestId `
150
129
@@ -166,7 +145,7 @@ Learn more about this practice in the blog post:
166
145
167
146
## FAQ
168
147
169
- ** How do I update the props of a render component?**
148
+ ** How do I update the props of a rendered component?**
170
149
171
150
It'd probably be better if you test the component that's doing the prop updating
172
151
to ensure that the props are being updated correctly (see
@@ -185,7 +164,7 @@ render(<NumberDisplay number={2} />, {container})
185
164
expect (queryByTestId (' number-display' ).textContent ).toBe (' 2' )
186
165
```
187
166
188
- [ Open the tests] ( https://github.com/kentcdodds/testing-workshop /blob/master/src/__tests__/number-display.js )
167
+ [ Open the tests] ( https://github.com/kentcdodds/react- testing-library /blob/master/src/__tests__/number-display.js )
189
168
for a full example of this.
190
169
191
170
** If I can't use shallow rendering, how do I mock out components in tests?**
@@ -222,7 +201,7 @@ test('you can mock things with jest.mock', () => {
222
201
Note that because they're Jest mock functions (` jest.fn() ` ), you could also make
223
202
assertions on those as well if you wanted.
224
203
225
- [ Open full test] ( https://github.com/kentcdodds/testing-workshop /blob/master/src/__tests__/mock.react-transition-group.js )
204
+ [ Open full test] ( https://github.com/kentcdodds/react- testing-library /blob/master/src/__tests__/mock.react-transition-group.js )
226
205
for the full example.
227
206
228
207
This looks like more work that shallow rendering (and it is), but it gives you
@@ -231,7 +210,7 @@ enough.
231
210
232
211
If you want to make things more like shallow rendering, then you could do
233
212
something more
234
- [ like this] ( https://github.com/kentcdodds/testing-workshop /blob/master/src/__tests__/shallow.react-transition-group.js ) .
213
+ [ like this] ( https://github.com/kentcdodds/react- testing-library /blob/master/src/__tests__/shallow.react-transition-group.js ) .
235
214
236
215
Learn more about how Jest mocks work from my blog post:
237
216
[ "But really, what is a JavaScript mock?"] ( https://blog.kentcdodds.com/but-really-what-is-a-javascript-mock-10d060966f7d )
0 commit comments