Skip to content
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.

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

build: ReactTestRenderer package #7362

Merged
merged 1 commit into from
Jul 29, 2016

Conversation

iamdustan
Copy link
Contributor

Reading @cpojer’s blog post on Jest 14 this morning (http://facebook.github.io/jest/blog/2016/07/27/jest-14.html) and the import from React internals stuck out to me. The goal is that we can change the public blog post to the following sooner rather than later:

- import renderer from 'react/lib/ReactTestRenderer';
+ import renderer from 'react-test-renderer';

@zpao
Copy link
Member

zpao commented Jul 27, 2016

Yea we really should have done this before talking about it 😕 Requiring from lib is 100% unsupported and our own projects shouldn't promote it.

I think that package name sounds fine. Want to bike shed on it at all @spicyj?

@iamdustan, I think you forgot to git add a few files 😛

@iamdustan iamdustan force-pushed the snapshot-renderer-package branch from 45a9369 to 8ca74ac Compare July 27, 2016 15:32
@iamdustan
Copy link
Contributor Author

Thank Git for revisionist history :)

@iamdustan
Copy link
Contributor Author

my own bikeshedding on the name:

  • ReactTestUtils has a createRenderer method that could be confusing with the ReactTestRenderer. ReactTestRenderer != ReactTestUtils.createRenderer().
  • as far as I can tell this renderer is explicitly for snapshot testing? ReactSnapshotRenderer maybe?

@ghost ghost added the CLA Signed label Jul 27, 2016
@sophiebits
Copy link
Collaborator

import renderer from 'react-test-renderer';

Where does the name "renderer" come from? I don't remember writing that anywhere.

This renderer is not only for snapshot testing, it's more of a generic inspectable test renderer which doesn't quite have all the hooks yet. Shallow rendering should've been called createShallowRenderer.

We already have the react-test-renderer name on npm and that seems good (thanks @thejameskyle).

@ghost ghost added the CLA Signed label Jul 27, 2016
@iamdustan
Copy link
Contributor Author

idk? that line was pulled out of the code example on the jest blog. Not sure if you’re referring to the first renderer or the second renderer in that. Its sounding like this is okay as is though?

"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"homepage": "https://facebook.github.io/react-native/",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not react-native :P

@zpao
Copy link
Member

zpao commented Jul 28, 2016

We should also have a readme in there, as well as adding this package to the version check script (https://github.com/facebook/react/blob/master/gulp/tasks/version-check.js).

I was going to ship 15.3 today but I think I'd like to get this in so we don't end up delaying updates to that Jest post. Any updates you want to make to this are great, otherwise we can followup with the rest and get that in tonight. Then we'll ship 15.3 tomorrow.

@zpao
Copy link
Member

zpao commented Jul 28, 2016

@spicyj if you wanted to writeup a short readme, that would be great.

@ghost ghost added the CLA Signed label Jul 28, 2016
@iamdustan
Copy link
Contributor Author

👍 I'll hit these updates in a few hours.

@sophiebits
Copy link
Collaborator

sophiebits commented Jul 28, 2016

README:


react-test-renderer

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.

Usage:

const ReactTestRenderer = require('react-test-renderer');

const renderer = ReactTestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(renderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

You can also 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.

@cpojer
Copy link
Contributor

cpojer commented Jul 29, 2016

@spicyj should we add that currently the API is unstable beyond toJSON and instance.props.<foo> ?

@ghost ghost added the CLA Signed label Jul 29, 2016
@iamdustan iamdustan force-pushed the snapshot-renderer-package branch from 8ca74ac to 155c345 Compare July 29, 2016 02:47
@iamdustan
Copy link
Contributor Author

Updated.

@ghost ghost added the CLA Signed label Jul 29, 2016
@zpao zpao added this to the 15.3.0 milestone Jul 29, 2016
@zpao zpao merged commit 7e874f5 into facebook:master Jul 29, 2016
@ghost ghost added the CLA Signed label Jul 29, 2016
zpao pushed a commit that referenced this pull request Jul 29, 2016
(cherry picked from commit 7e874f5)
@iamdustan iamdustan deleted the snapshot-renderer-package branch July 29, 2016 19:26
iamdustan added a commit to iamdustan/jest that referenced this pull request Jul 29, 2016
cpojer pushed a commit to jestjs/jest that referenced this pull request Aug 1, 2016
NMinhNguyen referenced this pull request in enzymejs/react-shallow-renderer Jan 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants