New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add ReactTestRenderer documentations #10692

Merged

acdlite merged 14 commits into facebook:master from koba04:add-react-test-renderer-documentations

Sep 26, 2017

Contributor

koba04 commented Sep 13, 2017

I think react-test-renderer is a useful library for testing as well as ShallowRenderer so it would be nice if there is a documentation for that.
The library has very convenient APIs provided by #10377 so I start writing the documentation, which is working on progress.

Does it make sense?

Thanks!


          Add ReactTestRenderer documentations

c6b6622

facebook-github-bot added the CLA Signed label

gaearon reviewed

View reviewed changes

docs/docs/react-test-renderer.md Outdated


		## Overview

		This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Collaborator

gaearon Sep 13, 2017

Let's remove "experimental" here, I think we support it pretty well now.

docs/docs/react-test-renderer.md Outdated


		This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

		Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.

Collaborator

gaearon Sep 13, 2017

Let's make jsdom a link since people might not know what it is.

docs/docs/react-test-renderer.md Outdated


		This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

		Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.

Collaborator

gaearon Sep 13, 2017

"DOM tree" is a bit iffy when said about React Native. Maybe "a snapshot of the platform view hierarchy (similar to a DOM tree)"?

docs/docs/react-test-renderer.md Outdated

+              Example:
+              ```javascript
+              const ReactTestRenderer = require('react-test-renderer');

Collaborator

gaearon Sep 13, 2017

Let's use ES6 in main example.

docs/docs/react-test-renderer.md Outdated

+              //   children: [ 'Facebook' ] }
+              ```
+              You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: http://facebook.github.io/jest/blog/2016/07/27/jest-14.html.

Collaborator

gaearon Sep 13, 2017

Maybe let's wrap link into text, e.g. [Learn more about it.]

docs/docs/react-test-renderer.md Outdated


		You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: http://facebook.github.io/jest/blog/2016/07/27/jest-14.html.

		You can traverse a ReactElement by methods ReactTestInstance provides.

Collaborator

gaearon Sep 13, 2017

Let's change to "You can also traverse the output to find specific nodes and make assertions about them."

docs/docs/react-test-renderer.md Outdated

+              const testRenderer = ReactTestRenderer.create(<MyComponent />);
+              const testInstance = testRenderer.root;
+              console.log(testInstance.findByType(SubComponent).props.foo); // bar

Collaborator

gaearon Sep 13, 2017

Let's change this code to do Jest assertions with expect.

docs/docs/react-test-renderer.md Outdated

+              ```
+              Create a React Test Render instance, which has the following methods.
+              You can pass `createNodeMock` function as the option, which allows for custom mocking behavior.

Collaborator

gaearon Sep 13, 2017

The createNodeMock documentation is a bit too vague here. I also don't want to call it out too prominently since it's mostly useful in a very specific scenario that's best described separately. Ideas?

gaearon mentioned this pull request

React 16 Umbrella ☂️ (and 15.5) #8854

Closed

koba04 added 13 commits

September 14, 2017 16:22


          Add TestRenderer documentations

f8ed90d


          TestRenderer is not experiment

a5ffe0a


          Add a link for jsdom

cd13d94


          Use ES Modules syntax

2a3f78a


          Twaek

7080bf9


          Add a Link component

794e823


          Use Jest assertions

1ad37d1


          Move a documentation for createNodeMock to Idea section

a101d63


          Renamed

929b15b


          Tweak

66a3a27


          Rename

8c45c77


          More explicit

40444c4


          Add a usecase for createNodeMock

11012b3

Contributor Author

koba04 commented Sep 15, 2017

findAll, findAllByType, findByProps accept deep option but I didn't document it because I think it is a little confusing and not needed in common case.

Contributor Author

koba04 commented Sep 19, 2017

Maybe I've addressed feedback!

Collaborator

acdlite commented Sep 26, 2017

Going to merge this. We can clean up remaining nits later.

acdlite merged commit b9d5569 into facebook:master

Contributor Author

koba04 commented Sep 27, 2017

Thanks!

koba04 deleted the add-react-test-renderer-documentations branch

September 27, 2017 00:56

bvaughn pushed a commit that referenced this pull request


          Merge changes from master into Gatsby branch (#10853)

2b317d1

* Update changelog for unreleased 16.0 changes (#10730)

* First shot at updating changelog for 16.0

**what is the change?:**
Added an 'unreleased' section to the changelog with info from #10294

**why make this change?:**
To get things set for the 16.0 release.

**test plan:**
Visual inspection

**issue:**
#8854

* Fix typos and formatting errors in changelog

* Add requestAnimationFrame and remove "New helpful warnings"

**what is the change?:**
In response to helpful code review -
- Add mention of dependency on `requestAnimationFrame` and need to
  polyfill that as well as `Map` and `Set`
- Remove "New helpful warnings" section; it was incomplete, and there
  are so many new and updated warnings that it might not be reasonable
  to cover them in the changelog.

**why make this change?:**
Accuracy

**test plan:**
Visual inspection

**issue:**
issue #8854

* Improve wording

* Improve wording and fix missing links

* Add backticks to file names & code; wording tweak

* Break "Major Changes" into "New Feature" and "Breaking Changes"

* Add server side render changes to 16.0 changelog

* Change gist link from mine to gaearons

* Add note about returning fragments

* fix misc nits

* Misc. formatting/wording fixes to changelog

**what is the change?:**
Thanks to the kind code review comments of @gaearon and @nhunzaker we
have
- removed the non-deterministic bold styling on some bullet points
- improved wording of the bullet points for portals, attribute whitelist
  changes, and server rendering changes
- Add note about error boundaries including a breaking change to error
  handling behavior.
- punctuation and capitalization fixes

**why make this change?:**
Clarity and correctness

**test plan:**
Visual inspection

**issue:**
#8854

* fix broken link

* Fixes #9667: Updated createTextInstance to create the text node on correct document (#10723)

* Record sizes

*  Add a changelog for elements having the same key (#10811)

*  Add a changelog for elements having the same key

* Reword

* Markdown fixs on "DOM Attributes in React 16" post (#10816)

* Include tag name into the table snapshot (#10818)

* Update DOM warning wording and link (#10819)

* Update DOM warning wording and link

* Consistently use "Invalid" for known misspellings

* Update license headers BSD+Patents -> MIT

Did find and replace in TextMate.

```
find: (?:( \*)( ))?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+(?:this source tree|the same directory)\.$
replace: $1$2Copyright (c) $3-present, Facebook, Inc.\n$1\n$1$2This source code is licensed under the MIT license found in the\n$1$2LICENSE file in the root directory of this source tree.
```

* Change license and remove references to PATENTS

Only remaining references:

```
docs/_posts/2014-10-28-react-v0.12.md
51:You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.

docs/_posts/2015-04-17-react-native-v0.4.md
20:* **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/).

src/__mocks__/vendor/third_party/WebComponents.js
8: * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
```

* Version bumps to use MIT license

* Add ReactTestRenderer documentations (#10692)

* Add ReactTestRenderer documentations

* Add TestRenderer documentations

* TestRenderer is not experiment

* Add a link for jsdom

* Use ES Modules syntax

* Twaek

* Add a Link component

* Use Jest assertions

* Move a documentation for createNodeMock to Idea section

* Renamed

* Tweak

* Rename

* More explicit

* Add a usecase for createNodeMock

* Add changelog for 15.6.2

* Add 15.6.2 blog post to master

* Add Nate to authors on master

* Bump object-assign patch range to match main package.json

* Flow should ignore node_modules/create-react-class

* Update error codes

* Update CHANGELOG for React 16

* v16.0.0

* Doc updates for React 16 + blog post (#10824)

* Doc updates for React 16 + blog post

* Add link to Sophie's post

* Fix React links on the website (#10837)

* Fix React links on the website

* Fix code editor

* Fix code editor, attempt 2

* Doc change for prevContext removal in CDU (#10836)

* Doc change for prevContext removal in CDU

Ref: #8631

* Minor rewording

* Fix note formatting

* React.createPortal is not a function (#10843)

* Update Portals Documentation (#10840)

* Update Portals Documentation

Correct some grammar to be more explicit and clear. Update example CodePen to better match code found in documentation. Update code example styles to match other code examples (ie. 'State and Lifecycle', 'Handling Events').

* Clean up comment to be accurate to example

There was a small comment overlooked when reviewing the documentation. This fixes it to be accurate to the example as well as grammatically correct.

* Update portals.md

* More fixes

* Update name of property initializer proposal (#10812)

The proposal for property initializers is called [Public Class Fields](https://tc39.github.io/proposal-class-public-fields/) now (part of the combined [Class Fields](https://github.com/tc39/proposal-class-fields) proposal).

* Fix portal link (#10845)

* Update docs for React 16 (#10846)

* Minor doc edit

* Rename urls

Collaborator

sophiebits commented Oct 4, 2017

Thanks for adding docs to this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment