File tree Expand file tree Collapse file tree
06-test-react-components-with-jest-and-react-testing-library Expand file tree Collapse file tree Original file line number Diff line number Diff 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+ ---
You can’t perform that action at this time.
0 commit comments