From ed56bb0dd39879a67883a998796b7410515424ef Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Mon, 8 Jan 2024 13:33:38 -0500 Subject: [PATCH 1/7] [RTR] Add usage warning behind flag --- packages/react-test-renderer/shallow.js | 21 ++++++++- .../src/ReactTestRenderer.js | 14 +++++- .../ReactTestRenderer-test.internal.js | 15 +++++++ .../ShallowRenderer-test.internal.js | 44 +++++++++++++++++++ packages/shared/ReactFeatureFlags.js | 3 ++ .../forks/ReactFeatureFlags.native-fb.js | 2 + .../forks/ReactFeatureFlags.native-oss.js | 2 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../ReactFeatureFlags.test-renderer.native.js | 2 + .../ReactFeatureFlags.test-renderer.www.js | 2 + .../shared/forks/ReactFeatureFlags.www.js | 2 + 11 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js diff --git a/packages/react-test-renderer/shallow.js b/packages/react-test-renderer/shallow.js index f4e93d121e5c7..3f277bc079b1e 100644 --- a/packages/react-test-renderer/shallow.js +++ b/packages/react-test-renderer/shallow.js @@ -4,7 +4,24 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @flow */ -export {default} from 'react-shallow-renderer'; +import ReactShallowRenderer from 'react-shallow-renderer'; +import {enableReactTestRendererWarning} from 'shared/ReactFeatureFlags'; + +const emptyObject = {}; + +export default class ReactShallowRendererWithWarning extends ReactShallowRenderer { + render(element, context = emptyObject) { + if (__DEV__) { + if (enableReactTestRendererWarning === true) { + console.warn( + "React's Shallow Renderer export will be removed in a future release. " + + 'Please use @testing-library/react instead.', + ); + } + } + + return super.render(element, context); + } +} diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index c82c33811539c..e450f8ca9578a 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -52,7 +52,10 @@ import {checkPropStringCoercion} from 'shared/CheckStringCoercion'; import {getPublicInstance} from './ReactFiberConfigTestHost'; import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags'; -import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags'; +import { + allowConcurrentByDefault, + enableReactTestRendererWarning, +} from 'shared/ReactFeatureFlags'; const act = React.act; @@ -471,6 +474,15 @@ function create( getInstance(): React$Component | PublicInstance | null, unstable_flushSync: typeof flushSync, } { + if (__DEV__) { + if (enableReactTestRendererWarning === true) { + console.warn( + 'Support for ReactTestRenderer will be removed in a future release. ' + + 'Please use @testing-library/react instead.', + ); + } + } + let createNodeMock = defaultTestOptions.createNodeMock; let isConcurrent = false; let isStrictMode = false; diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js index 37c17c05b08ba..275e9c2a2adad 100644 --- a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js +++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js @@ -51,6 +51,21 @@ function cleanNodeOrArray(node) { } describe('ReactTestRenderer', () => { + beforeEach(() => { + jest.resetModules(); + ReactFeatureFlags.enableReactTestRendererWarning = false; + }); + + it('should warn if enableReactTestRendererWarning is enabled', () => { + ReactFeatureFlags.enableReactTestRendererWarning = true; + expect(() => { + ReactTestRenderer.create(
); + }).toWarnDev( + 'Warning: Support for ReactTestRenderer will be removed in a future release. Please use @testing-library/react instead.', + {withoutStack: true}, + ); + }); + it('renders a simple component', () => { function Link() { return ; diff --git a/packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js new file mode 100644 index 0000000000000..1f921036dccc8 --- /dev/null +++ b/packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +let React; +let ReactShallowRenderer; +let ReactFeatureFlags; + +function HelloWorld() { + return

Hello, world!

; +} + +describe('ShallowRenderer', () => { + beforeEach(() => { + jest.resetModules(); + ReactFeatureFlags = require('shared/ReactFeatureFlags'); + React = require('react'); + ReactShallowRenderer = require('../../shallow.js').default; + }); + + it('should render without warnings without enableReactTestRendererWarning', () => { + ReactFeatureFlags.enableReactTestRendererWarning = false; + const renderer = new ReactShallowRenderer(); + expect(renderer.render()).toMatchSnapshot(); + }); + + it('should render with warnings with enableReactTestRendererWarning', () => { + ReactFeatureFlags.enableReactTestRendererWarning = true; + const renderer = new ReactShallowRenderer(); + expect(() => { + renderer.render(); + }).toWarnDev( + "Warning: React's Shallow Renderer export will be removed in a future release. Please use @testing-library/react instead.", + {withoutStack: true}, + ); + }); +}); diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 8a503e433ff30..1fff2b2c420d0 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -204,6 +204,9 @@ export const enableUnifiedSyncLane = true; // Adds an opt-in to time slicing for updates that aren't wrapped in startTransition. export const allowConcurrentByDefault = false; +// Warn on any usage of ReactTestRenderer +export const enableReactTestRendererWarning = false; + // ----------------------------------------------------------------------------- // React DOM Chopping Block // diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 3a7dad1b9c8a5..9d8031647b050 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -101,5 +101,7 @@ export const enableInfiniteRenderLoopDetection = false; // because JSX is an extremely hot path. export const enableRefAsProp = false; +export const enableReactTestRendererWarning = false; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index ac09110a4a517..611dcc54c32a1 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -92,5 +92,7 @@ export const enableServerComponentKeys = true; // TODO: Should turn this on in next "major" RN release. export const enableRefAsProp = false; +export const enableReactTestRendererWarning = false; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index e5dc5fe25cfee..eb0601ce34bb4 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -97,6 +97,7 @@ export const enableInfiniteRenderLoopDetection = false; // flags should be handled by the Fiber config. const __NEXT_MAJOR__ = __EXPERIMENTAL__; export const enableRefAsProp = __NEXT_MAJOR__; +export const enableReactTestRendererWarning = false; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 6081e57da8ef4..bbeaef2b2c4d4 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -88,5 +88,7 @@ export const enableServerComponentKeys = true; export const enableRefAsProp = false; +export const enableReactTestRendererWarning = false; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 6694b6b8afeff..91613dd4df5a2 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -91,5 +91,7 @@ export const enableInfiniteRenderLoopDetection = false; export const enableRefAsProp = false; +export const enableReactTestRendererWarning = false; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 2babd5bcd695c..a34757b760c44 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -120,5 +120,7 @@ export const enableServerComponentKeys = true; // because JSX is an extremely hot path. export const enableRefAsProp = false; +export const enableReactTestRendererWarning = false; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); From 3d3863df20d5720d784a82a27506e2c936ae31b8 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Mon, 8 Jan 2024 17:35:02 -0500 Subject: [PATCH 2/7] Add test snapshot --- .../__snapshots__/ShallowRenderer-test.internal.js.snap | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap diff --git a/packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap b/packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap new file mode 100644 index 0000000000000..ce181e1388af8 --- /dev/null +++ b/packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ShallowRenderer should render without warnings without enableReactTestRendererWarning 1`] = ` +

+ Hello, world! +

+`; From 376590468c661c4a8cae00ce339b44a5a41e54e4 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Fri, 16 Feb 2024 11:47:42 -0500 Subject: [PATCH 3/7] Conditional shallow export, update warning msg --- packages/react-test-renderer/shallow.js | 24 +++++++++++-------- .../src/ReactTestRenderer.js | 3 +-- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/react-test-renderer/shallow.js b/packages/react-test-renderer/shallow.js index 3f277bc079b1e..3b36f734e4f84 100644 --- a/packages/react-test-renderer/shallow.js +++ b/packages/react-test-renderer/shallow.js @@ -9,19 +9,23 @@ import ReactShallowRenderer from 'react-shallow-renderer'; import {enableReactTestRendererWarning} from 'shared/ReactFeatureFlags'; -const emptyObject = {}; +let Renderer = ReactShallowRenderer; -export default class ReactShallowRendererWithWarning extends ReactShallowRenderer { - render(element, context = emptyObject) { - if (__DEV__) { - if (enableReactTestRendererWarning === true) { +if (enableReactTestRendererWarning === true) { + const emptyObject = {}; + Renderer = class ReactShallowRendererWithWarning extends ( + ReactShallowRenderer + ) { + render(element, context = emptyObject) { + if (__DEV__) { console.warn( - "React's Shallow Renderer export will be removed in a future release. " + - 'Please use @testing-library/react instead.', + 'react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer', ); } - } - return super.render(element, context); - } + return super.render(element, context); + } + }; } + +export default Renderer; diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index e450f8ca9578a..d0494de7293ed 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -477,8 +477,7 @@ function create( if (__DEV__) { if (enableReactTestRendererWarning === true) { console.warn( - 'Support for ReactTestRenderer will be removed in a future release. ' + - 'Please use @testing-library/react instead.', + 'react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer', ); } } From 866ea334d7985a03e1ad2ce24d66905a6c1d84bb Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Tue, 20 Feb 2024 15:49:00 -0500 Subject: [PATCH 4/7] Move flag definition --- packages/react-test-renderer/shallow.js | 25 +---------- .../ShallowRenderer-test.internal.js | 44 ------------------- .../ShallowRenderer-test.internal.js.snap | 7 --- packages/shared/ReactFeatureFlags.js | 8 ++-- 4 files changed, 7 insertions(+), 77 deletions(-) delete mode 100644 packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js delete mode 100644 packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap diff --git a/packages/react-test-renderer/shallow.js b/packages/react-test-renderer/shallow.js index 3b36f734e4f84..f4e93d121e5c7 100644 --- a/packages/react-test-renderer/shallow.js +++ b/packages/react-test-renderer/shallow.js @@ -4,28 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * + * @flow */ -import ReactShallowRenderer from 'react-shallow-renderer'; -import {enableReactTestRendererWarning} from 'shared/ReactFeatureFlags'; - -let Renderer = ReactShallowRenderer; - -if (enableReactTestRendererWarning === true) { - const emptyObject = {}; - Renderer = class ReactShallowRendererWithWarning extends ( - ReactShallowRenderer - ) { - render(element, context = emptyObject) { - if (__DEV__) { - console.warn( - 'react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer', - ); - } - - return super.render(element, context); - } - }; -} - -export default Renderer; +export {default} from 'react-shallow-renderer'; diff --git a/packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js deleted file mode 100644 index 1f921036dccc8..0000000000000 --- a/packages/react-test-renderer/src/__tests__/ShallowRenderer-test.internal.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @emails react-core - */ - -'use strict'; - -let React; -let ReactShallowRenderer; -let ReactFeatureFlags; - -function HelloWorld() { - return

Hello, world!

; -} - -describe('ShallowRenderer', () => { - beforeEach(() => { - jest.resetModules(); - ReactFeatureFlags = require('shared/ReactFeatureFlags'); - React = require('react'); - ReactShallowRenderer = require('../../shallow.js').default; - }); - - it('should render without warnings without enableReactTestRendererWarning', () => { - ReactFeatureFlags.enableReactTestRendererWarning = false; - const renderer = new ReactShallowRenderer(); - expect(renderer.render()).toMatchSnapshot(); - }); - - it('should render with warnings with enableReactTestRendererWarning', () => { - ReactFeatureFlags.enableReactTestRendererWarning = true; - const renderer = new ReactShallowRenderer(); - expect(() => { - renderer.render(); - }).toWarnDev( - "Warning: React's Shallow Renderer export will be removed in a future release. Please use @testing-library/react instead.", - {withoutStack: true}, - ); - }); -}); diff --git a/packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap b/packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap deleted file mode 100644 index ce181e1388af8..0000000000000 --- a/packages/react-test-renderer/src/__tests__/__snapshots__/ShallowRenderer-test.internal.js.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ShallowRenderer should render without warnings without enableReactTestRendererWarning 1`] = ` -

- Hello, world! -

-`; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 1fff2b2c420d0..be3f6745d6192 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -185,6 +185,11 @@ export const enableInfiniteRenderLoopDetection = true; // during element creation. export const enableRefAsProp = __NEXT_MAJOR__; +// Not ready to break experimental yet. +// Needs more internal cleanup +// Warn on any usage of ReactTestRenderer +export const enableReactTestRendererWarning = false; + // ----------------------------------------------------------------------------- // Chopping Block // @@ -204,9 +209,6 @@ export const enableUnifiedSyncLane = true; // Adds an opt-in to time slicing for updates that aren't wrapped in startTransition. export const allowConcurrentByDefault = false; -// Warn on any usage of ReactTestRenderer -export const enableReactTestRendererWarning = false; - // ----------------------------------------------------------------------------- // React DOM Chopping Block // From 1176aedb0a8a55c70de9136f8b2eae013eab1dc8 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Fri, 16 Feb 2024 15:04:15 -0500 Subject: [PATCH 5/7] Update msg in test --- .../src/__tests__/ReactTestRenderer-test.internal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js index 275e9c2a2adad..36b9896952b56 100644 --- a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js +++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js @@ -61,7 +61,7 @@ describe('ReactTestRenderer', () => { expect(() => { ReactTestRenderer.create(
); }).toWarnDev( - 'Warning: Support for ReactTestRenderer will be removed in a future release. Please use @testing-library/react instead.', + 'Warning: react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer', {withoutStack: true}, ); }); From 6b5cc6998462a21996d49f6a773a2d3e7a2fdd0c Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Fri, 16 Feb 2024 15:44:30 -0500 Subject: [PATCH 6/7] Skip warning msg for dev tools --- packages/react-test-renderer/src/ReactTestRenderer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index d0494de7293ed..f1d65c5aeeef2 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -475,7 +475,10 @@ function create( unstable_flushSync: typeof flushSync, } { if (__DEV__) { - if (enableReactTestRendererWarning === true) { + if ( + enableReactTestRendererWarning === true && + global.__REACT_DEVTOOLS_GLOBAL_HOOK__ == null + ) { console.warn( 'react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer', ); From 113bf6f1e2c229914c516e7624d5e1960318b6f1 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Tue, 20 Feb 2024 15:50:23 -0500 Subject: [PATCH 7/7] Remove dev tools noop for now --- packages/react-test-renderer/src/ReactTestRenderer.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index f1d65c5aeeef2..d0494de7293ed 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -475,10 +475,7 @@ function create( unstable_flushSync: typeof flushSync, } { if (__DEV__) { - if ( - enableReactTestRendererWarning === true && - global.__REACT_DEVTOOLS_GLOBAL_HOOK__ == null - ) { + if (enableReactTestRendererWarning === true) { console.warn( 'react-test-renderer is deprecated. See https://react.dev/warnings/react-test-renderer', );