build: ReactTestRenderer package

[iamdustan]

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]

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]

Thank Git for revisionist history :)

[iamdustan]

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?

[sophiebits]

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).

[iamdustan]

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?

[zpao]

Not react-native :P

[zpao]

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]

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

[iamdustan]

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

[sophiebits]

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]

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

[iamdustan]

Updated.