From 33a5dafaf98c0796d37a6f6dc91075ae94f818eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Tue, 6 Oct 2020 18:35:59 +0200 Subject: [PATCH 01/13] feat: export root test instance from render --- src/render.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/render.js b/src/render.js index 3adfcc8d7..957aa38ad 100644 --- a/src/render.js +++ b/src/render.js @@ -44,6 +44,7 @@ export default function render( ...findByAPI(instance), ...a11yAPI(instance), update, + root: instance, rerender: update, // alias for `update` unmount: renderer.unmount, toJSON: renderer.toJSON, From fadbcc04f9fd757109e534fd2c6ae958931345dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Tue, 6 Oct 2020 18:36:39 +0200 Subject: [PATCH 02/13] test: add tests for root test instance returned from render function --- src/__tests__/render.test.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index ebf846967..2c2006c7c 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -382,3 +382,28 @@ test('renders options.wrapper around updated node', () => { `); }); + +it('returns root test instance', () => { + // when + const renderResult = render(); + + // then + expect(renderResult.root).toBeDefined(); + expect(renderResult.root.type).toBe(View); +}); + +it('returns wrapped component as root test instance', () => { + // given + const WrapperComponent = ({ children }) => ( + {children} + ); + + // when + const renderResult = render(, { + wrapper: WrapperComponent, + }); + + // then + expect(renderResult.root).toBeDefined(); + expect(renderResult.root.type).toBe(WrapperComponent); +}); From 1ac5f147a8083a1b7913147df26ce775a7f124c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Tue, 6 Oct 2020 18:37:38 +0200 Subject: [PATCH 03/13] docs: add description about root test instance returned from render function --- website/docs/API.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/website/docs/API.md b/website/docs/API.md index 0a323762e..3ef322a12 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -118,6 +118,14 @@ toJSON(): ReactTestRendererJSON | null Get the rendered component JSON representation, e.g. for snapshot testing. +### `root` + +```ts +root: ReactTestInstance +``` + +Reference to the root [`ReactTestInstance`](https://reactjs.org/docs/test-renderer.html#testinstance). A similar object as the one returned by [queries](Queries.md). + ## `cleanup` ```ts From 7ecd516362e9567df07e3810b597bcd8c328c04f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Mon, 12 Oct 2020 18:58:47 +0200 Subject: [PATCH 04/13] feat: change root export to container and wrap component in View if no wrapper defined --- src/render.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/render.js b/src/render.js index 957aa38ad..3eec05c42 100644 --- a/src/render.js +++ b/src/render.js @@ -1,5 +1,7 @@ // @flow import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { View } from 'react-native'; import TestRenderer, { type ReactTestRenderer } from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies import act from './act'; import { addToCleanupQueue } from './cleanup'; @@ -27,7 +29,7 @@ export default function render( { wrapper: Wrapper, createNodeMock }: Options = {} ) { const wrap = (innerElement: React.Element) => - Wrapper ? {innerElement} : innerElement; + Wrapper ? {innerElement} : {innerElement}; const renderer = renderWithAct( wrap(component), @@ -44,7 +46,7 @@ export default function render( ...findByAPI(instance), ...a11yAPI(instance), update, - root: instance, + container: instance, rerender: update, // alias for `update` unmount: renderer.unmount, toJSON: renderer.toJSON, From 42d8ba5ea35b5dd5a72180fa711e49faf9ff2916 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Mon, 12 Oct 2020 18:59:24 +0200 Subject: [PATCH 05/13] docs: update description about container test instance returned from render function --- website/docs/API.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/docs/API.md b/website/docs/API.md index 3ef322a12..2f69a546e 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -118,13 +118,13 @@ toJSON(): ReactTestRendererJSON | null Get the rendered component JSON representation, e.g. for snapshot testing. -### `root` +### `container` ```ts -root: ReactTestInstance +container: ReactTestInstance ``` -Reference to the root [`ReactTestInstance`](https://reactjs.org/docs/test-renderer.html#testinstance). A similar object as the one returned by [queries](Queries.md). +Reference to the root element. It is a `View` component by default, or a Wrapper component provided in `options`. ## `cleanup` From af9cf4669690e0a4d0e7ea2997e09aedade70c45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Mon, 12 Oct 2020 19:01:03 +0200 Subject: [PATCH 06/13] test: update tests for root test instance returned from render function --- .../__snapshots__/render.test.js.snap | 448 ++++++++---------- src/__tests__/fireEvent.test.js | 4 +- src/__tests__/render.test.js | 12 +- 3 files changed, 193 insertions(+), 271 deletions(-) diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap index 55a88ffb7..68cd24d86 100644 --- a/src/__tests__/__snapshots__/render.test.js.snap +++ b/src/__tests__/__snapshots__/render.test.js.snap @@ -2,173 +2,135 @@ exports[`debug 1`] = ` " - - Is the banana fresh? - - - not fresh - - - - + + Is the banana fresh? + + + not fresh + + + + + > + + Change freshness! + + + + First Text + + + Second Text + - Change freshness! + 0 - - First Text - - - Second Text - - - 0 - " `; exports[`debug changing component: bananaFresh button message should now be "fresh" 1`] = ` " - - Is the banana fresh? - - - fresh - - - - + + Is the banana fresh? + + + fresh + + + + + > + + Change freshness! + + + + First Text + + + Second Text + - Change freshness! + 0 - - First Text - - - Second Text - - - 0 - " `; exports[`debug: shallow 1`] = ` " - - Is the banana fresh? - - - not fresh - - - - - Change freshness! - - - First Text - - - Second Text - - - 0 - + " `; @@ -176,49 +138,7 @@ exports[`debug: shallow with message 1`] = ` "my other custom message - - Is the banana fresh? - - - not fresh - - - - - Change freshness! - - - First Text - - - Second Text - - - 0 - + " `; @@ -226,85 +146,89 @@ exports[`debug: with message 1`] = ` "my custom message - - Is the banana fresh? - - - not fresh - - - + + + Is the banana fresh? + + + not fresh + + + + + + Change freshness! + + + + First Text + + + Second Text + + + 0 + + +" +`; + +exports[`toJSON 1`] = ` + - Change freshness! + press me - - First Text - - - Second Text - - - 0 - -" -`; - -exports[`toJSON 1`] = ` - - - press me - `; diff --git a/src/__tests__/fireEvent.test.js b/src/__tests__/fireEvent.test.js index 5fef1c806..1cdcdf410 100644 --- a/src/__tests__/fireEvent.test.js +++ b/src/__tests__/fireEvent.test.js @@ -62,9 +62,7 @@ describe('fireEvent', () => { }); test('should throw an Error when event handler was not found', () => { - const { getByText } = render( - 'this is not passed to children'} /> - ); + const { getByText } = render(); expect(() => fireEvent(getByText('Without event'), 'press')).toThrow( 'No handler function found for event: "press"' diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index 2c2006c7c..cc528d3a7 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -383,16 +383,16 @@ test('renders options.wrapper around updated node', () => { `); }); -it('returns root test instance', () => { +test('returns container', () => { // when const renderResult = render(); // then - expect(renderResult.root).toBeDefined(); - expect(renderResult.root.type).toBe(View); + expect(renderResult.container).toBeDefined(); + expect(renderResult.container.type).toBe(View); }); -it('returns wrapped component as root test instance', () => { +test('returns wrapped component as container', () => { // given const WrapperComponent = ({ children }) => ( {children} @@ -404,6 +404,6 @@ it('returns wrapped component as root test instance', () => { }); // then - expect(renderResult.root).toBeDefined(); - expect(renderResult.root.type).toBe(WrapperComponent); + expect(renderResult.container).toBeDefined(); + expect(renderResult.container.type).toBe(WrapperComponent); }); From dba42cd085014fdb3a8f415c7712796e645d74d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Mon, 12 Oct 2020 20:03:30 +0200 Subject: [PATCH 07/13] test: clean up comments in tests --- src/__tests__/render.test.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index cc528d3a7..42f3daea0 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -384,26 +384,21 @@ test('renders options.wrapper around updated node', () => { }); test('returns container', () => { - // when const renderResult = render(); - // then expect(renderResult.container).toBeDefined(); expect(renderResult.container.type).toBe(View); }); test('returns wrapped component as container', () => { - // given const WrapperComponent = ({ children }) => ( {children} ); - // when const renderResult = render(, { wrapper: WrapperComponent, }); - // then expect(renderResult.container).toBeDefined(); expect(renderResult.container.type).toBe(WrapperComponent); }); From 53ddcd775201cb54b7f0a9b8cae29ff97fed4fbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Klekowski?= Date: Mon, 12 Oct 2020 20:09:07 +0200 Subject: [PATCH 08/13] feat: add react-native as peerDependency, clean up lint ignore for lines that was importing react-native --- package.json | 1 + src/fireEvent.js | 1 - src/helpers/getByAPI.js | 3 --- src/render.js | 1 - 4 files changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index 4668ca109..00566f77c 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ }, "peerDependencies": { "react": ">=16.0.0", + "react-native": ">=0.59", "react-test-renderer": ">=16.0.0" }, "scripts": { diff --git a/src/fireEvent.js b/src/fireEvent.js index c9156dd13..f3846c714 100644 --- a/src/fireEvent.js +++ b/src/fireEvent.js @@ -7,7 +7,6 @@ const isHostElement = (element?: ReactTestInstance) => { }; const isTextInput = (element?: ReactTestInstance) => { - // eslint-disable-next-line import/no-extraneous-dependencies const { TextInput } = require('react-native'); return element?.type === TextInput; }; diff --git a/src/helpers/getByAPI.js b/src/helpers/getByAPI.js index 6f860ac8c..33c88d50f 100644 --- a/src/helpers/getByAPI.js +++ b/src/helpers/getByAPI.js @@ -13,7 +13,6 @@ const filterNodeByType = (node, type) => node.type === type; const getNodeByText = (node, text) => { try { - // eslint-disable-next-line const { Text } = require('react-native'); const isTextComponent = filterNodeByType(node, Text); if (isTextComponent) { @@ -61,7 +60,6 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => { const getTextInputNodeByPlaceholderText = (node, placeholder) => { try { - // eslint-disable-next-line const { TextInput } = require('react-native'); return ( filterNodeByType(node, TextInput) && @@ -76,7 +74,6 @@ const getTextInputNodeByPlaceholderText = (node, placeholder) => { const getTextInputNodeByDisplayValue = (node, value) => { try { - // eslint-disable-next-line const { TextInput } = require('react-native'); return ( filterNodeByType(node, TextInput) && diff --git a/src/render.js b/src/render.js index 3eec05c42..c304e21bd 100644 --- a/src/render.js +++ b/src/render.js @@ -1,6 +1,5 @@ // @flow import * as React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies import { View } from 'react-native'; import TestRenderer, { type ReactTestRenderer } from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies import act from './act'; From ec432eba157afac6a382cbf19d973c1a84dd3b90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 20 Oct 2020 11:23:23 +0200 Subject: [PATCH 09/13] revert adding default wrapper --- .../__snapshots__/render.test.js.snap | 448 ++++++++++-------- src/render.js | 3 +- 2 files changed, 263 insertions(+), 188 deletions(-) diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap index 68cd24d86..55a88ffb7 100644 --- a/src/__tests__/__snapshots__/render.test.js.snap +++ b/src/__tests__/__snapshots__/render.test.js.snap @@ -2,135 +2,173 @@ exports[`debug 1`] = ` " - - - Is the banana fresh? - - - not fresh - - - - + Is the banana fresh? + + + not fresh + + + + - - Change freshness! - - - - First Text - - - Second Text - + } + > - 0 + Change freshness! + + First Text + + + Second Text + + + 0 + " `; exports[`debug changing component: bananaFresh button message should now be "fresh" 1`] = ` " - - - Is the banana fresh? - - - fresh - - - - + Is the banana fresh? + + + fresh + + + + - - Change freshness! - - - - First Text - - - Second Text - + } + > - 0 + Change freshness! + + First Text + + + Second Text + + + 0 + " `; exports[`debug: shallow 1`] = ` " - + + Is the banana fresh? + + + not fresh + + + + + Change freshness! + + + First Text + + + Second Text + + + 0 + " `; @@ -138,7 +176,49 @@ exports[`debug: shallow with message 1`] = ` "my other custom message - + + Is the banana fresh? + + + not fresh + + + + + Change freshness! + + + First Text + + + Second Text + + + 0 + " `; @@ -146,89 +226,85 @@ exports[`debug: with message 1`] = ` "my custom message - - - Is the banana fresh? - - - not fresh - - - - - - Change freshness! - - - - First Text - - - Second Text - - - 0 - - -" -`; - -exports[`toJSON 1`] = ` - + + Is the banana fresh? + + + not fresh + + + - press me + Change freshness! + + First Text + + + Second Text + + + 0 + +" +`; + +exports[`toJSON 1`] = ` + + + press me + `; diff --git a/src/render.js b/src/render.js index c304e21bd..03e745dcf 100644 --- a/src/render.js +++ b/src/render.js @@ -1,6 +1,5 @@ // @flow import * as React from 'react'; -import { View } from 'react-native'; import TestRenderer, { type ReactTestRenderer } from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies import act from './act'; import { addToCleanupQueue } from './cleanup'; @@ -28,7 +27,7 @@ export default function render( { wrapper: Wrapper, createNodeMock }: Options = {} ) { const wrap = (innerElement: React.Element) => - Wrapper ? {innerElement} : {innerElement}; + Wrapper ? {innerElement} : innerElement; const renderer = renderWithAct( wrap(component), From d4ff7728a4e2520296a9b1a93a59471407433036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 20 Oct 2020 11:25:59 +0200 Subject: [PATCH 10/13] rework tests --- src/__tests__/fireEvent.test.js | 4 +++- src/__tests__/render.test.js | 12 ++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/__tests__/fireEvent.test.js b/src/__tests__/fireEvent.test.js index 1cdcdf410..5fef1c806 100644 --- a/src/__tests__/fireEvent.test.js +++ b/src/__tests__/fireEvent.test.js @@ -62,7 +62,9 @@ describe('fireEvent', () => { }); test('should throw an Error when event handler was not found', () => { - const { getByText } = render(); + const { getByText } = render( + 'this is not passed to children'} /> + ); expect(() => fireEvent(getByText('Without event'), 'press')).toThrow( 'No handler function found for event: "press"' diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index 42f3daea0..f64d6282f 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -384,10 +384,10 @@ test('renders options.wrapper around updated node', () => { }); test('returns container', () => { - const renderResult = render(); + const { container } = render(); - expect(renderResult.container).toBeDefined(); - expect(renderResult.container.type).toBe(View); + expect(container).toBeDefined(); + expect(container.type).toBe(View); }); test('returns wrapped component as container', () => { @@ -395,10 +395,10 @@ test('returns wrapped component as container', () => { {children} ); - const renderResult = render(, { + const { container } = render(, { wrapper: WrapperComponent, }); - expect(renderResult.container).toBeDefined(); - expect(renderResult.container.type).toBe(WrapperComponent); + expect(container).toBeDefined(); + expect(container.type).toBe(WrapperComponent); }); From 4d0bb54afe49054b110f7e3384eb18c01c3e1c6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 20 Oct 2020 11:34:09 +0200 Subject: [PATCH 11/13] reword docs --- website/docs/API.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/API.md b/website/docs/API.md index 2f69a546e..abdef6031 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -121,10 +121,10 @@ Get the rendered component JSON representation, e.g. for snapshot testing. ### `container` ```ts -container: ReactTestInstance +container: ReactTestInstance; ``` -Reference to the root element. It is a `View` component by default, or a Wrapper component provided in `options`. +A reference to the rendered root element. ## `cleanup` From ea30bd55d21de16d5b4b1d79c919d8fb11998521 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Wed, 21 Oct 2020 11:57:27 +0200 Subject: [PATCH 12/13] add testID checks --- src/__tests__/render.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index f64d6282f..2a8aa62fa 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -388,6 +388,7 @@ test('returns container', () => { expect(container).toBeDefined(); expect(container.type).toBe(View); + expect(container.props.testID).toBe('inner'); }); test('returns wrapped component as container', () => { @@ -401,4 +402,5 @@ test('returns wrapped component as container', () => { expect(container).toBeDefined(); expect(container.type).toBe(WrapperComponent); + expect(container.props.testID).not.toBeDefined(); }); From 9ab6d501e9ed7dfd9c7b043c2b88c28cdc3fb7e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Wed, 21 Oct 2020 12:20:23 +0200 Subject: [PATCH 13/13] add comments --- src/__tests__/render.test.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index 2a8aa62fa..a1d8d0c0d 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -387,6 +387,8 @@ test('returns container', () => { const { container } = render(); expect(container).toBeDefined(); + // `View` composite component is returned. This behavior will break if we + // start returning only host components. expect(container.type).toBe(View); expect(container.props.testID).toBe('inner'); }); @@ -401,6 +403,8 @@ test('returns wrapped component as container', () => { }); expect(container).toBeDefined(); + // `WrapperComponent` composite component is returned with no testID passed to + // it. This behavior will break if we start returning only host components. expect(container.type).toBe(WrapperComponent); expect(container.props.testID).not.toBeDefined(); });