diff --git a/.all-contributorsrc b/.all-contributorsrc index 06802e81..1c181443 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -360,6 +360,16 @@ "contributions": [ "doc" ] + }, + { + "login": "ehteshamkafeel", + "name": "Ehtesham Kafeel", + "avatar_url": "https://avatars1.githubusercontent.com/u/1213123?v=4", + "profile": "https://github.com/ehteshamkafeel", + "contributions": [ + "code", + "doc" + ] } ] } diff --git a/README.md b/README.md index 7f66cc63..56fc3256 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-36-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-37-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] @@ -215,6 +215,19 @@ The containing DOM node of your rendered React Element (rendered using > `container.firstChild` will only get the first child of that Fragment, not the > Fragment itself. +#### `baseElement` + +The containing DOM node where your React Element is rendered in the container. +If you don't specify the `baseElement` in the options of `render`, it will +default to `documentElement`. + +This is useful when the component you want to test renders something outside the +container div, e.g. when you want to snapshot test your portal component which +renders it's HTML directly in the body. + +> Note: the queries returned by the `render` looks into baseElement, so you can +> use queries to test your portal component without the baseElement. + #### `debug` This method is a shortcut for `console.log(prettyDOM(container))`. @@ -946,7 +959,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
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") | [
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") | [
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") | [
Matija Marohnić](https://silvenon.com)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=silvenon "Documentation") | [
Justice Mba](https://github.com/Dajust)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=Dajust "Documentation") | -| [
Mark Pollmann](https://markpollmann.com/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=MarkPollmann "Documentation") | +| [
Mark Pollmann](https://markpollmann.com/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=MarkPollmann "Documentation") | [
Ehtesham Kafeel](https://github.com/ehteshamkafeel)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=ehteshamkafeel "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=ehteshamkafeel "Documentation") | diff --git a/src/__tests__/render.js b/src/__tests__/render.js index 066accd1..b5c09b90 100644 --- a/src/__tests__/render.js +++ b/src/__tests__/render.js @@ -1,21 +1,58 @@ +import 'jest-dom/extend-expect' import React from 'react' +import ReactDOM from 'react-dom' import {render, cleanup} from '../' afterEach(cleanup) -it('renders button into document', () => { +test('renders div into document', () => { const ref = React.createRef() const {container} = render(
) expect(container.firstChild).toBe(ref.current) }) -it('access portal elements inside body', () => { - const {getByText} = render(
) - 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) +test('works great with react portals', () => { + class MyPortal extends React.Component { + constructor(...args) { + super(...args) + this.portalNode = document.createElement('div') + this.portalNode.dataset.testid = 'my-portal' + } + componentDidMount() { + document.body.appendChild(this.portalNode) + } + componentWillUnmount() { + this.portalNode.parentNode.removeChild(this.portalNode) + } + render() { + return ReactDOM.createPortal( + , + this.portalNode, + ) + } + } + + function Greet({greeting, subject}) { + return ( +
+ + {greeting} {subject} + +
+ ) + } + + const {unmount, getByTestId, getByText} = render() + expect(getByText('Hello World')).toBeInTheDOM() + const portalNode = getByTestId('my-portal') + expect(document.body.contains(portalNode)).toBe(true) + unmount() + expect(document.body.contains(portalNode)).toBe(false) +}) + +test('returns baseElement which defaults to document.documentElement', () => { + const {baseElement} = render(
) + expect(baseElement).toBe(document.documentElement) }) it('cleansup document', () => { diff --git a/src/index.js b/src/index.js index 3ae2f5da..8993e012 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,7 @@ function render(ui, {container, baseElement = container} = {}) { ReactDOM.render(ui, container) return { container, + baseElement, // eslint-disable-next-line no-console debug: (el = baseElement) => console.log(prettyDOM(el)), unmount: () => ReactDOM.unmountComponentAtNode(container),