From 0e715b57bf67957228cbf976820a60f2c8d0b1af Mon Sep 17 00:00:00 2001 From: Salah Date: Wed, 6 Jun 2018 13:16:00 +0400 Subject: [PATCH 1/4] fix: add support for react portal elements --- .all-contributorsrc | 10 ++++++++++ README.md | 4 ++-- src/__tests__/render-into-document.js | 9 +++++++++ src/index.js | 11 +++++++---- 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index c913500b..ebeab27b 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -314,6 +314,16 @@ "doc" ] }, + { + "login": "thesalah", + "name": "Salah", + "avatar_url": "https://avatars3.githubusercontent.com/u/6624197?v=4", + "profile": "https://github.com/thesalah", + "contributions": [ + "code", + "test" + ] + }, { "login": "icfantv", "name": "Adam Gordon", diff --git a/README.md b/README.md index 53d32477..b8c28f62 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-32-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-33-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] [![Join the community on Spectrum][spectrum-badge]][spectrum] @@ -914,7 +914,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
Anto Aravinth](https://github.com/antoaravinth)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
Łukasz Gandecki](http://team.thebrain.pro)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | [
Ivan Babak](https://sompylasar.github.io)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [πŸ€”](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Jesse Day](https://github.com/jday3)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") | [
Ernesto GarcΓ­a](http://gnapse.github.io)
[πŸ’¬](#question-gnapse "Answering Questions") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Documentation") | [
Josef Maxx Blake](http://jomaxx.com)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Tests") | | [
Michal Baranowski](https://twitter.com/baranovskim)
[πŸ“](#blog-mbaranovski "Blogposts") [βœ…](#tutorial-mbaranovski "Tutorials") | [
Arthur Puthin](https://github.com/aputhin)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=aputhin "Documentation") | [
Thomas Chia](https://github.com/thchia)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Documentation") | [
Thiago Galvani](http://ilegra.com/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thiagopaiva99 "Documentation") | [
Christian](http://Chriswcs.github.io)
[⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=ChrisWcs "Tests") | [
Alex Krolick](https://alexkrolick.com)
[πŸ’¬](#question-alexkrolick "Answering Questions") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alexkrolick "Documentation") [πŸ’‘](#example-alexkrolick "Examples") [πŸ€”](#ideas-alexkrolick "Ideas, Planning, & Feedback") | [
Johann Hubert Sonntagbauer](https://github.com/johann-sonntagbauer)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Tests") | | [
Maddi Joyce](http://www.maddijoyce.com)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=maddijoyce "Code") | [
Ryan Vice](http://www.vicesoftware.com)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=RyanAtViceSoftware "Documentation") | [
Ian Wilson](https://ianwilson.io)
[πŸ“](#blog-iwilsonq "Blogposts") [βœ…](#tutorial-iwilsonq "Tutorials") | [
Daniel](https://github.com/InExtremaRes)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AInExtremaRes "Bug reports") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=InExtremaRes "Code") | [
Giorgio Polvara](https://twitter.com/Gpx)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AGpx "Bug reports") [πŸ€”](#ideas-Gpx "Ideas, Planning, & Feedback") | [
John Gozde](https://github.com/jgoz)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jgoz "Code") | [
Sam Horton](https://twitter.com/SavePointSam)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=SavePointSam "Documentation") [πŸ’‘](#example-SavePointSam "Examples") [πŸ€”](#ideas-SavePointSam "Ideas, Planning, & Feedback") | -| [
Richard Kotze (mobile)](http://www.richardkotze.com)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=rkotze "Documentation") | [
Brahian E. Soto Mercedes](https://github.com/sotobuild)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=sotobuild "Documentation") | [
Benoit de La Forest](https://github.com/bdelaforest)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=bdelaforest "Documentation") | [
Adam Gordon](http://gordonizer.com)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aicfantv "Bug reports") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=icfantv "Code") | +| [
Richard Kotze (mobile)](http://www.richardkotze.com)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=rkotze "Documentation") | [
Brahian E. Soto Mercedes](https://github.com/sotobuild)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=sotobuild "Documentation") | [
Benoit de La Forest](https://github.com/bdelaforest)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=bdelaforest "Documentation") | [
Adam Gordon](http://gordonizer.com)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aicfantv "Bug reports") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=icfantv "Code") | [
Salah](https://github.com/thesalah)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=thesalah "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=thesalah "Tests") | diff --git a/src/__tests__/render-into-document.js b/src/__tests__/render-into-document.js index 886e239a..2b7351fe 100644 --- a/src/__tests__/render-into-document.js +++ b/src/__tests__/render-into-document.js @@ -9,6 +9,15 @@ it('renders button into document', () => { expect(container.firstChild).toBe(ref.current) }) +it('access portal elements inside body', () => { + const {getByText} = renderIntoDocument(
) + const portalComponent = document.createElement('div') + portalComponent.appendChild(document.createTextNode('Hello World')) + document.body.appendChild(portalComponent) + expect(getByText('Hello World')).not.toBeNull() + document.body.removeChild(portalComponent) +}) + it('cleansup document', () => { const spy = jest.fn() diff --git a/src/index.js b/src/index.js index c23b88bb..720bb771 100644 --- a/src/index.js +++ b/src/index.js @@ -2,19 +2,22 @@ import ReactDOM from 'react-dom' import {Simulate} from 'react-dom/test-utils' import {getQueriesForElement, prettyDOM} from 'dom-testing-library' -function render(ui, {container = document.createElement('div')} = {}) { +function render( + ui, + {container = document.createElement('div'), baseElement = container} = {}, +) { ReactDOM.render(ui, container) return { container, // eslint-disable-next-line no-console - debug: () => console.log(prettyDOM(container)), + debug: () => console.log(prettyDOM(baseElement)), unmount: () => ReactDOM.unmountComponentAtNode(container), rerender: rerenderUi => { render(rerenderUi, {container}) // Intentionally do not return anything to avoid unnecessarily complicating the API. // folks can use all the same utilities we return in the first place that are bound to the container }, - ...getQueriesForElement(container), + ...getQueriesForElement(baseElement), } } @@ -23,7 +26,7 @@ const mountedContainers = new Set() function renderIntoDocument(ui) { const container = document.body.appendChild(document.createElement('div')) mountedContainers.add(container) - return render(ui, {container}) + return render(ui, {container, baseElement: document.body}) } function cleanup() { From 36ff384c2b678a4cee5d10ddeb39c05f1debcdfd Mon Sep 17 00:00:00 2001 From: Salah Date: Sun, 10 Jun 2018 09:50:05 +0400 Subject: [PATCH 2/4] Update documentation to add react portal support --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b8c28f62..9460c13e 100644 --- a/README.md +++ b/README.md @@ -330,7 +330,8 @@ const usernameInputElement = getByTestId('username-input') ### `renderIntoDocument` Render into `document.body`. Should be used with [cleanup](#cleanup). -`renderIntoDocument` will return the same object as [render](#render) +`renderIntoDocument` will return the same object as [render](#render) but with test utilities exposed for `document.body` rather than the component alone. +This helps to test [React portal](https://reactjs.org/docs/portals.html) elements. ```javascript import {renderIntoDocument} from 'react-testing-library' From 2df2cba902400e56a268a3240ab7fbca6d159618 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 12 Jun 2018 09:22:03 -0600 Subject: [PATCH 3/4] Update index.js --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 720bb771..3d328dc9 100644 --- a/src/index.js +++ b/src/index.js @@ -26,7 +26,7 @@ const mountedContainers = new Set() function renderIntoDocument(ui) { const container = document.body.appendChild(document.createElement('div')) mountedContainers.add(container) - return render(ui, {container, baseElement: document.body}) + return render(ui, {container, baseElement: document.documentElement}) } function cleanup() { From 7ff4365cb5bc06c3d95f1fb8ffcde7397736b561 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 12 Jun 2018 09:23:08 -0600 Subject: [PATCH 4/4] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9460c13e..a43ea852 100644 --- a/README.md +++ b/README.md @@ -330,8 +330,10 @@ const usernameInputElement = getByTestId('username-input') ### `renderIntoDocument` Render into `document.body`. Should be used with [cleanup](#cleanup). -`renderIntoDocument` will return the same object as [render](#render) but with test utilities exposed for `document.body` rather than the component alone. -This helps to test [React portal](https://reactjs.org/docs/portals.html) elements. +`renderIntoDocument` will return the same object as [render](#render) +but with test utilities exposed for `document.documentElement` rather +than the `container` alone. This helps to test +[React portal](https://reactjs.org/docs/portals.html) elements. ```javascript import {renderIntoDocument} from 'react-testing-library'