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]
-[](#contributors)
+[](#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,