diff --git a/.all-contributorsrc b/.all-contributorsrc index 9f79d4ea..f7e9353d 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -606,6 +606,15 @@ "doc", "example" ] + }, + { + "login": "chrbala", + "name": "chrbala", + "avatar_url": "https://avatars0.githubusercontent.com/u/6834804?v=4", + "profile": "https://github.com/chrbala", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index 256e1be4..2efb13fb 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-62-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-63-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] @@ -410,6 +410,11 @@ const {container} = render(, { otherwise this defaults to `document.documentElement`. This is used as the base element for the queries as well as what is printed when you use `debug()`. +**hydrate**: If hydrate is set to true, then it will render with +[ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate). This may be +useful if you are using server-side rendering and use ReactDOM.hydrate to mount +your components. + In the example above, the `render` method returns an object that has a few @@ -1342,7 +1347,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
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") | [
Julio Pavรณn](http://jpavon.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=jpavon "Code") | [
Duncan L](http://www.duncanleung.com/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=duncanleung "Documentation") [๐Ÿ’ก](#example-duncanleung "Examples") | [
Tiago Almeida](https://www.linkedin.com/in/tyagow/?locale=en_US)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=tyagow "Documentation") | [
Robert Smith](http://rbrtsmith.com/)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Arbrtsmith "Bug reports") | [
Zach Green](https://offbyone.tech)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=zgreen "Documentation") | | [
dadamssg](https://github.com/dadamssg)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [
Yazan Aabed](https://www.yaabed.com/)
[๐Ÿ“](#blog-YazanAabeed "Blogposts") | [
Tim](https://github.com/timbonicus)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [
Divyanshu Maithani](http://divyanshu.xyz)
[โœ…](#tutorial-divyanshu013 "Tutorials") [๐Ÿ“น](#video-divyanshu013 "Videos") | [
Deepak Grover](https://www.linkedin.com/in/metagrover)
[โœ…](#tutorial-metagrover "Tutorials") [๐Ÿ“น](#video-metagrover "Videos") | [
Eyal Cohen](https://github.com/eyalcohen4)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [
Peter Makowski](https://github.com/petermakowski)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") | | [
Michiel Nuyts](https://github.com/Michielnuyts)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [
Joe Ng'ethe](https://github.com/joeynimu)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [
Kate](https://github.com/Enikol)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [
Sean](http://www.seanrparker.com)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [
James Long](http://jlongster.com)
[๐Ÿค”](#ideas-jlongster "Ideas, Planning, & Feedback") [๐Ÿ“ฆ](#platform-jlongster "Packaging/porting to new platform") | [
Herb Hagely](https://github.com/hhagely)
[๐Ÿ’ก](#example-hhagely "Examples") | [
Alex Wendte](http://www.wendtedesigns.com/)
[๐Ÿ’ก](#example-themostcolm "Examples") | -| [
Monica Powell](http://www.aboutmonica.com)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [
Vitaly Sivkov](http://sivkoff.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [
Weyert de Boer](https://github.com/weyert)
[๐Ÿค”](#ideas-weyert "Ideas, Planning, & Feedback") [๐Ÿ‘€](#review-weyert "Reviewed Pull Requests") | [
EstebanMarin](https://github.com/EstebanMarin)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [
Victor Martins](https://github.com/vctormb)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [
Royston Shufflebotham](https://github.com/RoystonS)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [๐Ÿ’ก](#example-RoystonS "Examples") | +| [
Monica Powell](http://www.aboutmonica.com)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [
Vitaly Sivkov](http://sivkoff.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [
Weyert de Boer](https://github.com/weyert)
[๐Ÿค”](#ideas-weyert "Ideas, Planning, & Feedback") [๐Ÿ‘€](#review-weyert "Reviewed Pull Requests") | [
EstebanMarin](https://github.com/EstebanMarin)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [
Victor Martins](https://github.com/vctormb)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [
Royston Shufflebotham](https://github.com/RoystonS)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [๐Ÿ’ก](#example-RoystonS "Examples") | [
chrbala](https://github.com/chrbala)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=chrbala "Code") | diff --git a/src/__tests__/rerender.js b/src/__tests__/rerender.js index 79f80875..a35144b5 100644 --- a/src/__tests__/rerender.js +++ b/src/__tests__/rerender.js @@ -11,3 +11,25 @@ test('rerender will re-render the element', () => { rerender() expect(container.firstChild).toHaveTextContent('hey') }) + +test('hydrate will not update props until next render', () => { + const initial = '' + + const container = document.body.appendChild(document.createElement('div')) + container.innerHTML = initial + const input = container.querySelector('input') + const firstValue = 'hello' + + if (!input) throw new Error('No element') + input.value = firstValue + const {rerender} = render( null} />, { + container, + hydrate: true, + }) + + const secondValue = 'goodbye' + + expect(input.value).toBe(firstValue) + rerender( null} />) + expect(input.value).toBe(secondValue) +}) diff --git a/src/index.js b/src/index.js index 6dea3d08..2f48a4e0 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,10 @@ import {getQueriesForElement, prettyDOM, fireEvent} from 'dom-testing-library' const mountedContainers = new Set() -function render(ui, {container, baseElement = container, queries} = {}) { +function render( + ui, + {container, baseElement = container, queries, hydrate = false} = {}, +) { if (!container) { // default to document.body instead of documentElement to avoid output of potentially-large // head elements (such as JSS style blocks) in debug output @@ -16,7 +19,11 @@ function render(ui, {container, baseElement = container, queries} = {}) { // they're passing us a custom container or not. mountedContainers.add(container) - ReactDOM.render(ui, container) + if (hydrate) { + ReactDOM.hydrate(ui, container) + } else { + ReactDOM.render(ui, container) + } return { container, baseElement,