Skip to content

Commit 488fca3

Browse files
kylemhthebuilder
andauthored
Update README.md to include instructions for using test utils globally (#524)
* Update README.md Co-authored-by: Daniel Schmidt <[email protected]>
1 parent aa50422 commit 488fca3

File tree

1 file changed

+30
-1
lines changed

1 file changed

+30
-1
lines changed

README.md

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,11 @@ value you can pass either a `boolean` value or a threshold between `0` and `1`.
254254
255255
### `test-utils.js`
256256
257-
Import the methods from `react-intersection-observer/test-utils`.
257+
You can use these test utilities as imports in individual files OR you can globally mock Intersection Observer for all Jest tests. If you use a library or an application with a lot of Intersection Observer usage, you may wish to globally mock it; however, the official recommendation is to be purposeful about your mocking and do so on a per-usage basis.
258+
259+
#### Indvidual Methods
260+
261+
Import these from `react-intersection-observer/test-utils`.
258262
259263
**`mockAllIsIntersecting(isIntersecting:boolean | number)`**
260264
Set `isIntersecting` on all current IntersectionObserver instances.
@@ -267,6 +271,31 @@ Call the `intersectionMockInstance` method with an element, to get the (mocked)
267271
`IntersectionObserver` instance. You can use this to spy on the `observe` and
268272
`unobserve` methods.
269273
274+
#### Global Intersection Observer Behavior
275+
276+
##### Use Fallback
277+
278+
You can create a [Jest setup file](https://jestjs.io/docs/configuration#setupfiles-array) that leverages the [unsupported fallback](https://github.com/thebuilder/react-intersection-observer#unsupported-fallback) option. In this case, you only mock the IntersectionObserver in test files were you actively import `react-intersection-observer/test-utils`:
279+
280+
```js
281+
import { defaultFallbackInView } from 'react-intersection-observer';
282+
283+
defaultFallbackInView(true); // or 'false' - whichever consistent behavior makes the most sense for your use case.
284+
```
285+
286+
##### Mock Everywhere
287+
288+
In your Jest config, add `'react-intersection-observer/test-utils'` to the array value for the [`setupFilesAfterEnv`](https://jestjs.io/docs/configuration#setupfilesafterenv-array) option.
289+
290+
291+
```js
292+
module.exports = {
293+
// other config lines
294+
setupFilesAfterEnv: ['react-intersection-observer/test-utils'],
295+
// other config lines
296+
};
297+
```
298+
270299
### Test Example
271300
272301
```js

0 commit comments

Comments
 (0)