diff --git a/README.md b/README.md index ef623f94c..ef08e2973 100644 --- a/README.md +++ b/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). diff --git a/package.json b/package.json index abe10e9f3..3f42cc315 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap new file mode 100644 index 000000000..09a1b4fac --- /dev/null +++ b/src/__tests__/__snapshots__/render.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`toJSON 1`] = `"press me"`; diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index fa2c29d4f..e59b7274d 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -161,3 +161,9 @@ test('unmount', () => { unmount(); expect(fn).toHaveBeenCalled(); }); + +test('toJSON', () => { + const { toJSON } = render(); + + expect(toJSON()).toMatchSnapshot(); +}); diff --git a/src/render.js b/src/render.js index 0a3184ede..10830dcdd 100644 --- a/src/render.js +++ b/src/render.js @@ -20,5 +20,6 @@ export default function render( ...queryByAPI(instance), update: renderer.update, unmount: renderer.unmount, + toJSON: renderer.toJSON, }; } diff --git a/src/shallow.js b/src/shallow.js index 41e92e875..65509330c 100644 --- a/src/shallow.js +++ b/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(), }; } diff --git a/typings/index.d.ts b/typings/index.d.ts index bbf57539e..ac509c837 100644 --- a/typings/index.d.ts +++ b/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): void; unmount(nextElement?: React.ReactElement): void; + toJSON(): ReactTestRendererJSON | null; } export type FireEventFunction = (