Skip to content

Commit 4c17d3f

Browse files
Add note about global DOM requirement for screen (testing-library#723)
1 parent aa31914 commit 4c17d3f

File tree

3 files changed

+21
-8
lines changed

3 files changed

+21
-8
lines changed

docs/dom-testing-library/api-queries.mdx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ an error if no elements match.
2626

2727
`queryBy*` queries return the first matching node for a query, and return `null`
2828
if no elements match. This is useful for asserting an element that is not
29-
present. This throws an error if more than one match is found (use `queryAllBy` instead).
29+
present. This throws an error if more than one match is found (use `queryAllBy`
30+
instead).
3031

3132
### queryAllBy
3233

@@ -86,6 +87,17 @@ document.body.innerHTML = exampleHTML
8687
const exampleInput = screen.getByLabelText(/example/i)
8788
```
8889

90+
> **Note**
91+
>
92+
> You need a global DOM environment to use `screen`. If you're using jest, with
93+
> the
94+
> [testEnvironment](https://jestjs.io/docs/en/configuration#testenvironment-string)
95+
> set to `jsdom`, a global DOM environment will be available for you.
96+
>
97+
> If you're loading your test with a `script` tag, make sure it comes after the
98+
> `body`. An example can be seen
99+
> [here](https://github.com/testing-library/dom-testing-library/issues/700#issuecomment-692218886).
100+
89101
### `screen.debug`
90102

91103
For convenience screen also exposes a `debug` method in addition to the queries.

docs/react-testing-library/migrate-from-enzyme.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ with React Testing Library.
1313

1414
React Testing Library is part of an open-source project named
1515
[Testing Library](https://github.com/testing-library). There are several other
16-
helpful tools and libraries in the Testing Library project which you can use
17-
to write more useful tests. Besides React Testing Library, here are some
18-
other Testing Library's libraries that can help you along the way:
16+
helpful tools and libraries in the Testing Library project which you can use to
17+
write more useful tests. Besides React Testing Library, here are some other
18+
Testing Library's libraries that can help you along the way:
1919

2020
- **[@testing-library/jest-dom](https://github.com/testing-library/jest-dom)**:
2121
jest-dom provides a set of custom jest matchers that you can use to extend
@@ -49,9 +49,9 @@ development speed and productivity, since every small change requires rewriting
4949
some part of your tests, even if the change you made does not affect the
5050
component's output.
5151

52-
Re-writing your tests in React Testing library is worthwhile, because you're trading
53-
tests that slow you down for tests that give you more confidence and increase
54-
your productivity in the long run.
52+
Re-writing your tests in React Testing library is worthwhile, because you're
53+
trading tests that slow you down for tests that give you more confidence and
54+
increase your productivity in the long run.
5555

5656
## How to migrate from Enzyme to React Testing Library?
5757

docs/vue-testing-library/api.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,8 @@ See a working example of `update` in the
223223

224224
## `cleanup`
225225

226-
Unmounts Vue trees that were mounted with [render](#rendercomponent-options-callback).
226+
Unmounts Vue trees that were mounted with
227+
[render](#rendercomponent-options-callback).
227228

228229
> If you are using an environment that supports `afterEach` hook (as in Jest),
229230
> there's no need to call `cleanup` manually. Vue Testing Library handles it for

0 commit comments

Comments
 (0)