Skip to content

Commit 6e76f2c

Browse files
author
Larry Botha
committed
add notes on testing react portals
1 parent 9104748 commit 6e76f2c

1 file changed

Lines changed: 21 additions & 0 deletions

File tree

  • 06-test-react-components-with-jest-and-react-testing-library

06-test-react-components-with-jest-and-react-testing-library/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -662,3 +662,24 @@ Checkout individual branches for changes specific to that section of the course.
662662
this behaviour in a setup function that can be easily reused.
663663
664664
---
665+
666+
31. **Test React portals with react-testing-library**
667+
668+
```bash
669+
npx jest modal
670+
```
671+
672+
[`__tests__/modal.test.js`](./__tests__/modal.test.js)
673+
674+
Testing React Portals requires no changes to how we write tests. The only
675+
difference is that when we query for elements in our tests, they will be
676+
scoped to the full DOM.
677+
678+
If we want to scope our tests specifically to where the React Portal is
679+
mounted, we can use `react-testing-library`s `within` and pass in the node
680+
we want queries to be scoped to.
681+
682+
`within` returns the same `.query` and `.get` methods that render does, but
683+
scoped to the node it is called with.
684+
685+
---

0 commit comments

Comments
 (0)