feat: add toJSON to render; cleanup shallow (#35)

* feat: add toJSON to render; cleanup shallow

* Remove empty dependencies entry

* revert shallow import

* add docs

* add TS typings

Author: thymikee

README.md

@@ -136,6 +136,10 @@ Unmount the in-memory tree, triggering the appropriate lifecycle events
 
 When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom `render` method. [Follow this great guide on how to set this up](https://github.com/kentcdodds/react-testing-library#custom-render).
 
+### `toJSON: () => ?ReactTestRendererJSON`
+
+Get the rendered component JSON representation, e.g. for snapshot testing.
+
 ## `shallow`
 
 Shallowly render given React component. Since it doesn't return helpers to query the output, it's mostly advised to used for snapshot testing (short snapshots are best for code reviewers).

package.json

@@ -30,9 +30,6 @@
     "react": ">=16.0.0",
     "react-test-renderer": ">= 16.0.0"
   },
-  "dependencies": {
-    "react-is": "^16.5.2"
-  },
   "scripts": {
     "test": "jest",
     "flow-check": "flow check",

src/__tests__/__snapshots__/render.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toJSON 1`] = `"press me"`;

src/__tests__/render.test.js

@@ -161,3 +161,9 @@ test('unmount', () => {
   unmount();
   expect(fn).toHaveBeenCalled();
 });
+
+test('toJSON', () => {
+  const { toJSON } = render(<Button>press me</Button>);
+
+  expect(toJSON()).toMatchSnapshot();
+});

src/render.js

@@ -20,5 +20,6 @@ export default function render(
     ...queryByAPI(instance),
     update: renderer.update,
     unmount: renderer.unmount,
+    toJSON: renderer.toJSON,
   };
 }

src/shallow.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import { isValidElementType } from 'react-is';
 import ShallowRenderer from 'react-test-renderer/shallow'; // eslint-disable-line import/no-extraneous-dependencies
 
 /**
@@ -10,15 +9,10 @@ export default function shallow(
   instance: ReactTestInstance | React.Element<*>
 ) {
   const renderer = new ShallowRenderer();
-  if (isValidElementType(instance)) {
-    // $FlowFixMe - instance is React.Element<*> in this branch
-    renderer.render(instance);
-  } else {
-    renderer.render(React.createElement(instance.type, instance.props));
-  }
-  const output = renderer.getRenderOutput();
+
+  renderer.render(React.createElement(instance.type, instance.props));
 
   return {
-    output,
+    output: renderer.getRenderOutput(),
   };
 }

typings/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactTestInstance } from 'react-test-renderer';
+import { ReactTestInstance, ReactTestRendererJSON } from 'react-test-renderer';
 
 export interface GetByAPI {
   getByName: (name: React.ReactType) => ReactTestInstance;
@@ -30,6 +30,7 @@ export interface RenderOptions {
 export interface RenderAPI extends GetByAPI, QueryByAPI {
   update(nextElement: React.ReactElement<any>): void;
   unmount(nextElement?: React.ReactElement<any>): void;
+  toJSON(): ReactTestRendererJSON | null;
 }
 
 export type FireEventFunction = (