From 38c87d56444d9e850e8f32e35547d14c775e85f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 16 Oct 2018 17:36:28 +0200 Subject: [PATCH 1/5] feat: add toJSON to render; cleanup shallow --- package.json | 4 +--- src/__tests__/__snapshots__/render.test.js.snap | 3 +++ src/__tests__/render.test.js | 6 ++++++ src/debug.js | 2 +- src/render.js | 1 + src/shallow.js | 12 +++--------- 6 files changed, 15 insertions(+), 13 deletions(-) create mode 100644 src/__tests__/__snapshots__/render.test.js.snap diff --git a/package.json b/package.json index abe10e9f3..32f3fe637 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,7 @@ "react": ">=16.0.0", "react-test-renderer": ">= 16.0.0" }, - "dependencies": { - "react-is": "^16.5.2" - }, + "dependencies": {}, "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/debug.js b/src/debug.js index ce45289ce..483017906 100644 --- a/src/debug.js +++ b/src/debug.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; import prettyFormat, { plugins } from 'pretty-format'; // eslint-disable-line import/no-extraneous-dependencies -import shallow from './shallow'; +import { shallow } from '.'; /** * Log pretty-printed shallow test component instance 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(), }; } From aa44d3a70da5402ee2edbc1e9cea801306714d3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 16 Oct 2018 17:39:41 +0200 Subject: [PATCH 2/5] Remove empty dependencies entry --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 32f3fe637..3f42cc315 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "react": ">=16.0.0", "react-test-renderer": ">= 16.0.0" }, - "dependencies": {}, "scripts": { "test": "jest", "flow-check": "flow check", From 85718a38a7ab153d00afa5463a6b3c0c0497e8f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 16 Oct 2018 17:49:26 +0200 Subject: [PATCH 3/5] revert shallow import --- src/debug.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/debug.js b/src/debug.js index 483017906..ce45289ce 100644 --- a/src/debug.js +++ b/src/debug.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; import prettyFormat, { plugins } from 'pretty-format'; // eslint-disable-line import/no-extraneous-dependencies -import { shallow } from '.'; +import shallow from './shallow'; /** * Log pretty-printed shallow test component instance From b13fc5b431698ad5222f749caea4f7543aadb616 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 16 Oct 2018 17:54:09 +0200 Subject: [PATCH 4/5] add docs --- README.md | 4 ++++ 1 file changed, 4 insertions(+) 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). From 40f17d059ad6bcc0fcff7f07903228e18f006b32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 16 Oct 2018 17:55:26 +0200 Subject: [PATCH 5/5] add TS typings --- typings/index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 = (