From e66ef6480ecd19c6885f2c06dec34fec1fdc0a98 Mon Sep 17 00:00:00 2001 From: Ricky Date: Tue, 27 Jan 2026 22:34:03 -0500 Subject: [PATCH] [tests] remove withoutStack from assertConsole helpers (#35498) Stacked on https://github.com/facebook/react/pull/35497 ----- Now that the assert helpers require a component stack, we don't need the `{withoutStack: true}` option. --- .../__tests__/ReactInternalTestUtils-test.js | 655 +----------------- packages/internal-test-utils/consoleMock.js | 128 +--- .../src/__tests__/ReactFlight-test.js | 146 ++-- .../__tests__/ReactComponentLifeCycle-test.js | 350 +++++----- .../react-dom/src/__tests__/ReactDOM-test.js | 66 +- .../src/__tests__/ReactDOMFizzServer-test.js | 33 +- .../src/__tests__/ReactDOMFloat-test.js | 25 +- .../src/__tests__/ReactDOMForm-test.js | 24 +- .../__tests__/ReactDOMFragmentRefs-test.js | 22 +- ...actDOMLegacyComponentTree-test.internal.js | 30 +- .../src/__tests__/ReactDOMLegacyFiber-test.js | 51 +- .../src/__tests__/ReactDOMRoot-test.js | 119 ++-- .../src/__tests__/ReactIdentity-test.js | 11 +- .../src/__tests__/ReactLegacyMount-test.js | 119 ++-- .../src/__tests__/ReactLegacyUpdates-test.js | 44 +- .../__tests__/ReactMountDestruction-test.js | 30 +- .../__tests__/ReactServerRendering-test.js | 34 +- .../ReactServerRenderingHydration-test.js | 29 +- .../src/__tests__/ReactUpdates-test.js | 44 +- .../src/__tests__/validateDOMNesting-test.js | 7 +- .../__tests__/ReactFabric-test.internal.js | 8 +- .../src/__tests__/ReactActWarnings-test.js | 136 ++-- .../src/__tests__/ReactAsyncActions-test.js | 13 +- .../src/__tests__/ReactHooks-test.internal.js | 30 +- .../ReactHooksWithNoopRenderer-test.js | 19 +- .../src/__tests__/ReactMemo-test.js | 22 +- .../src/__tests__/ReactNewContext-test.js | 11 +- .../src/__tests__/ReactFlightDOMEdge-test.js | 18 +- .../src/__tests__/ReactFlightServer-test.js | 11 +- .../src/__tests__/ReactTestRenderer-test.js | 17 +- .../ReactCoffeeScriptClass-test.coffee | 8 +- .../src/__tests__/ReactCreateElement-test.js | 45 +- .../react/src/__tests__/ReactES6Class-test.js | 24 +- .../src/__tests__/ReactElementClone-test.js | 15 +- .../src/__tests__/ReactJSXRuntime-test.js | 47 +- .../ReactJSXTransformIntegration-test.js | 13 +- .../ReactProfilerComponent-test.internal.js | 11 +- .../__tests__/ReactStartTransition-test.js | 26 +- .../src/__tests__/ReactStrictMode-test.js | 92 +-- .../__tests__/ReactTypeScriptClass-test.ts | 24 +- .../createReactClassIntegration-test.js | 280 ++++---- .../react/src/__tests__/forwardRef-test.js | 76 +- .../useSyncExternalStoreShared-test.js | 16 +- 43 files changed, 874 insertions(+), 2055 deletions(-) diff --git a/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js b/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js index 8560c508082..730cb358aa6 100644 --- a/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js +++ b/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js @@ -568,36 +568,6 @@ describe('ReactInternalTestUtils console assertions', () => { `); }); - // @gate __DEV__ - it('fails if local withoutStack passed to assertConsoleLogDev', () => { - const message = expectToThrowFailure(() => { - console.log('Hello'); - assertConsoleLogDev([['Hello', {withoutStack: true}]]); - }); - - expect(message).toMatchInlineSnapshot(` - "assertConsoleLogDev(expected) - - Do not pass withoutStack to assertConsoleLogDev logs, console.log does not have component stacks." - `); - }); - - // @gate __DEV__ - it('fails if global withoutStack passed to assertConsoleLogDev', () => { - const message = expectToThrowFailure(() => { - console.log('Hello'); - assertConsoleLogDev(['Hello'], {withoutStack: true}); - }); - - expect(message).toMatchInlineSnapshot(` - "assertConsoleLogDev(expected) - - Do not pass withoutStack to assertConsoleLogDev, console.log does not have component stacks." - `); - - assertConsoleLogDev(['Hello']); - }); - // @gate __DEV__ it('fails if the args is greater than %s argument number', () => { const message = expectToThrowFailure(() => { @@ -1173,23 +1143,6 @@ describe('ReactInternalTestUtils console assertions', () => { `); }); - // @gate __DEV__ - it('fails if only warning does not contain a stack', () => { - const message = expectToThrowFailure(() => { - console.warn('Hello'); - assertConsoleWarnDev(['Hello']); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Missing component stack for: - "Hello" - - If this warning should omit a component stack, pass [log, {withoutStack: true}]. - If all warnings should omit the component stack, add {withoutStack: true} to the assertConsoleWarnDev call." - `); - }); - // @gate __DEV__ it('fails if first warning does not contain a stack', () => { const message = expectToThrowFailure(() => { @@ -1277,287 +1230,11 @@ describe('ReactInternalTestUtils console assertions', () => { `); }); - describe('global withoutStack', () => { - it('passes if warnings without stack explicitly opt out', () => { - if (__DEV__) { - console.warn('Hello'); - } - assertConsoleWarnDev(['Hello'], {withoutStack: true}); - - if (__DEV__) { - console.warn('Hello'); - console.warn('Good day'); - console.warn('Bye'); - } - - assertConsoleWarnDev(['Hello', 'Good day', 'Bye'], { - withoutStack: true, - }); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid null value', () => { - const message = expectToThrowFailure(() => { - console.warn('Hi'); - assertConsoleWarnDev(['Hi'], {withoutStack: null}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - The second argument must be {withoutStack: true}. - - Instead received {"withoutStack":null}." - `); - assertConsoleWarnDev(['Hi'], {withoutStack: true}); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid {} value', () => { - const message = expectToThrowFailure(() => { - console.warn('Hi'); - assertConsoleWarnDev(['Hi'], {withoutStack: {}}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - The second argument must be {withoutStack: true}. - - Instead received {"withoutStack":{}}." - `); - assertConsoleWarnDev(['Hi'], {withoutStack: true}); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid string value', () => { - const message = expectToThrowFailure(() => { - console.warn('Hi'); - assertConsoleWarnDev(['Hi'], {withoutStack: 'haha'}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - The second argument must be {withoutStack: true}. - - Instead received {"withoutStack":"haha"}." - `); - assertConsoleWarnDev(['Hi'], {withoutStack: true}); - }); - - // @gate __DEV__ - it('fails if only warning is not expected to have a stack, but does', () => { - const message = expectToThrowFailure(() => { - console.warn('Hello\n in div'); - assertConsoleWarnDev(['Hello'], {withoutStack: true}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Unexpected warning(s) recorded. - - - Expected warnings - + Received warnings - - - Hello - + Hello in div (at **)" - `); - }); - - // @gate __DEV__ - it('fails if warnings are not expected to have a stack, but some do', () => { - const message = expectToThrowFailure(() => { - console.warn('Hello\n in div'); - console.warn('Good day'); - console.warn('Bye\n in div'); - assertConsoleWarnDev(['Hello', 'Good day', 'Bye'], { - withoutStack: true, - }); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Unexpected warning(s) recorded. - - - Expected warnings - + Received warnings - - - Hello - + Hello in div (at **) - Good day - - Bye - + Bye in div (at **)" - `); - }); - }); - describe('local withoutStack', () => { - it('passes when expected withoutStack logs matches the actual logs', () => { - if (__DEV__) { - console.warn('Hello\n in div'); - console.warn('Good day'); - console.warn('Bye\n in div'); - } - assertConsoleWarnDev([ - 'Hello\n in div', - ['Good day', {withoutStack: true}], - 'Bye\n in div', - ]); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid null value', () => { - const message = expectToThrowFailure(() => { - console.warn('Hi'); - assertConsoleWarnDev([['Hi', {withoutStack: null}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":null}]." - `); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid {} value', () => { - const message = expectToThrowFailure(() => { - console.warn('Hi'); - assertConsoleWarnDev([['Hi', {withoutStack: {}}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":{}}]." - `); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid string value', () => { - const message = expectToThrowFailure(() => { - console.warn('Hi'); - assertConsoleWarnDev([['Hi', {withoutStack: 'haha'}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":"haha"}]." - `); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid number value', () => { - const message = expectToThrowFailure(() => { - console.warn('Hi'); - assertConsoleWarnDev([['Hi', {withoutStack: 4}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":4}]." - `); - }); - - // @gate __DEV__ - it('fails if you forget to wrap local withoutStack in array', () => { - const message = expectToThrowFailure(() => { - console.warn('Hello\n in div'); - console.warn('Bye\n in div'); - assertConsoleWarnDev(['Hello', {withoutStack: true}, 'Bye']); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Did you forget to wrap a log with withoutStack in an array? - - The expected message for assertConsoleWarnDev() must be a string or an array of length 2. - - Instead received {"withoutStack":true}." - `); - }); - - // @gate __DEV__ - it('fails if you wrap in an array unnecessarily', () => { - const message = expectToThrowFailure(() => { - console.warn('Hello'); - assertConsoleWarnDev([['Hello']]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Did you forget to remove the array around the log? - - The expected message for assertConsoleWarnDev() must be a string or an array of length 2, but there's only one item in the array. If this is intentional, remove the extra array." - `); - }); - - // @gate __DEV__ - it('fails if only warning is not expected to have a stack, but does', () => { - const message = expectToThrowFailure(() => { - console.warn('Hello\n in div'); - assertConsoleWarnDev([['Hello', {withoutStack: true}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Unexpected warning(s) recorded. - - - Expected warnings - + Received warnings - - - Hello - + Hello in div (at **)" - `); - }); - - // @gate __DEV__ - it('fails if warnings are not expected to have a stack, but some do', () => { - const message = expectToThrowFailure(() => { - console.warn('Hello\n in div'); - console.warn('Good day'); - console.warn('Bye\n in div'); - assertConsoleWarnDev([ - [ - 'Hello', - { - withoutStack: true, - }, - ], - 'Good day', - [ - 'Bye', - { - withoutStack: true, - }, - ], - ]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleWarnDev(expected) - - Unexpected warning(s) recorded. - - - Expected warnings - + Received warnings - - - Hello - + Hello in div (at **) - Good day - - Bye - + Bye in div (at **)" - `); - }); - }); - // @gate __DEV__ it('fails if the args is greater than %s argument number', () => { const message = expectToThrowFailure(() => { console.warn('Hi %s', 'Sara', 'extra'); - assertConsoleWarnDev(['Hi'], {withoutStack: true}); + assertConsoleWarnDev(['Hi']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleWarnDev(expected) @@ -1572,7 +1249,7 @@ describe('ReactInternalTestUtils console assertions', () => { const message = expectToThrowFailure(() => { console.warn('Hi %s', 'Sara', 'extra'); console.warn('Bye %s', 'Sara', 'extra'); - assertConsoleWarnDev(['Hi', 'Bye'], {withoutStack: true}); + assertConsoleWarnDev(['Hi', 'Bye']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleWarnDev(expected) @@ -1589,7 +1266,7 @@ describe('ReactInternalTestUtils console assertions', () => { it('fails if the %s argument number is greater than args', () => { const message = expectToThrowFailure(() => { console.warn('Hi %s'); - assertConsoleWarnDev(['Hi'], {withoutStack: true}); + assertConsoleWarnDev(['Hi']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleWarnDev(expected) @@ -1604,7 +1281,7 @@ describe('ReactInternalTestUtils console assertions', () => { const message = expectToThrowFailure(() => { console.warn('Hi %s'); console.warn('Bye %s'); - assertConsoleWarnDev(['Hi', 'Bye'], {withoutStack: true}); + assertConsoleWarnDev(['Hi', 'Bye']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleWarnDev(expected) @@ -2217,7 +1894,7 @@ describe('ReactInternalTestUtils console assertions', () => { "TypeError: Cannot read properties of undefined (reading 'stack')\n" + ' in Foo (at **)' ); - assertConsoleErrorDev([['Hi', {withoutStack: true}]]); + assertConsoleErrorDev(['Hi']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleErrorDev(expected) @@ -2254,313 +1931,11 @@ describe('ReactInternalTestUtils console assertions', () => { `); }); - describe('global withoutStack', () => { - it('passes if errors without stack explicitly opt out', () => { - if (__DEV__) { - console.error('Hello'); - } - assertConsoleErrorDev(['Hello'], {withoutStack: true}); - - if (__DEV__) { - console.error('Hello'); - console.error('Good day'); - console.error('Bye'); - } - - assertConsoleErrorDev(['Hello', 'Good day', 'Bye'], { - withoutStack: true, - }); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid null value', () => { - const message = expectToThrowFailure(() => { - console.error('Hi'); - assertConsoleErrorDev(['Hi'], {withoutStack: null}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - The second argument must be {withoutStack: true}. - - Instead received {"withoutStack":null}." - `); - assertConsoleErrorDev(['Hi'], {withoutStack: true}); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid {} value', () => { - const message = expectToThrowFailure(() => { - console.error('Hi'); - assertConsoleErrorDev(['Hi'], {withoutStack: {}}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - The second argument must be {withoutStack: true}. - - Instead received {"withoutStack":{}}." - `); - assertConsoleErrorDev(['Hi'], {withoutStack: true}); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid string value', () => { - const message = expectToThrowFailure(() => { - console.error('Hi'); - assertConsoleErrorDev(['Hi'], {withoutStack: 'haha'}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - The second argument must be {withoutStack: true}. - - Instead received {"withoutStack":"haha"}." - `); - assertConsoleErrorDev(['Hi'], {withoutStack: true}); - }); - - // @gate __DEV__ - it('fails if only error is not expected to have a stack, but does', () => { - const message = expectToThrowFailure(() => { - console.error('Hello\n in div'); - assertConsoleErrorDev(['Hello'], {withoutStack: true}); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Unexpected error(s) recorded. - - - Expected errors - + Received errors - - - Hello - + Hello in div (at **)" - `); - }); - - // @gate __DEV__ - it('fails if errors are not expected to have a stack, but some do', () => { - const message = expectToThrowFailure(() => { - console.error('Hello\n in div'); - console.error('Good day'); - console.error('Bye\n in div'); - assertConsoleErrorDev(['Hello', 'Good day', 'Bye'], { - withoutStack: true, - }); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Unexpected error(s) recorded. - - - Expected errors - + Received errors - - - Hello - + Hello in div (at **) - Good day - - Bye - + Bye in div (at **)" - `); - }); - }); - describe('local withoutStack', () => { - it('passes when expected withoutStack logs matches the actual logs', () => { - if (__DEV__) { - console.error('Hello\n in div'); - console.error('Good day'); - console.error('Bye\n in div'); - } - assertConsoleErrorDev([ - 'Hello\n in div', - ['Good day', {withoutStack: true}], - 'Bye\n in div', - ]); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid null value', () => { - const message = expectToThrowFailure(() => { - console.error('Hi'); - assertConsoleErrorDev([['Hi', {withoutStack: null}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":null}]." - `); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid {} value', () => { - const message = expectToThrowFailure(() => { - console.error('Hi'); - assertConsoleErrorDev([['Hi', {withoutStack: {}}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":{}}]." - `); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid string value', () => { - const message = expectToThrowFailure(() => { - console.error('Hi'); - assertConsoleErrorDev([['Hi', {withoutStack: 'haha'}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":"haha"}]." - `); - }); - - // @gate __DEV__ - it('fails if withoutStack is invalid number value', () => { - const message = expectToThrowFailure(() => { - console.error('Hi'); - assertConsoleErrorDev([['Hi', {withoutStack: 4}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Log entries that are arrays must be of the form [string, {withoutStack: true}] - - Instead received [string, {"withoutStack":4}]." - `); - }); - - // @gate __DEV__ - it('fails if you forget to wrap local withoutStack in array', () => { - const message = expectToThrowFailure(() => { - console.error('Hello\n in div'); - console.error('Bye\n in div'); - assertConsoleErrorDev(['Hello', {withoutStack: true}, 'Bye']); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Did you forget to wrap a log with withoutStack in an array? - - The expected message for assertConsoleErrorDev() must be a string or an array of length 2. - - Instead received {"withoutStack":true}." - `); - }); - - // @gate __DEV__ - it('fails if you wrap in an array unnecessarily', () => { - const message = expectToThrowFailure(() => { - console.error('Hello'); - assertConsoleErrorDev([['Hello']]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Did you forget to remove the array around the log? - - The expected message for assertConsoleErrorDev() must be a string or an array of length 2, but there's only one item in the array. If this is intentional, remove the extra array." - `); - }); - - // @gate __DEV__ - it('fails if only error is not expected to have a stack, but does', () => { - const message = expectToThrowFailure(() => { - console.error('Hello\n in div'); - assertConsoleErrorDev([['Hello', {withoutStack: true}]]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Unexpected error(s) recorded. - - - Expected errors - + Received errors - - - Hello - + Hello in div (at **)" - `); - }); - - // @gate __DEV__ - it('fails if errors are not expected to have a stack, but some do', () => { - const message = expectToThrowFailure(() => { - console.error('Hello\n in div'); - console.error('Good day'); - console.error('Bye\n in div'); - assertConsoleErrorDev([ - [ - 'Hello', - { - withoutStack: true, - }, - ], - 'Good day', - [ - 'Bye', - { - withoutStack: true, - }, - ], - ]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Unexpected error(s) recorded. - - - Expected errors - + Received errors - - - Hello - + Hello in div (at **) - Good day - - Bye - + Bye in div (at **)" - `); - }); - - // @gate __DEV__ - it('fails with a helpful error message if the expected error message mismatches', () => { - const message = expectToThrowFailure(() => { - console.error('Bye\n in div'); - assertConsoleErrorDev([ - [ - 'Hello', - { - withoutStack: true, - }, - ], - ]); - }); - expect(message).toMatchInlineSnapshot(` - "assertConsoleErrorDev(expected) - - Unexpected error(s) recorded. - - - Expected errors - + Received errors - - - Hello - + Bye in div (at **)" - `); - }); - }); - // @gate __DEV__ it('fails if the args is greater than %s argument number', () => { const message = expectToThrowFailure(() => { console.error('Hi %s', 'Sara', 'extra'); - assertConsoleErrorDev(['Hi'], {withoutStack: true}); + assertConsoleErrorDev(['Hi']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleErrorDev(expected) @@ -2575,7 +1950,7 @@ describe('ReactInternalTestUtils console assertions', () => { const message = expectToThrowFailure(() => { console.error('Hi %s', 'Sara', 'extra'); console.error('Bye %s', 'Sara', 'extra'); - assertConsoleErrorDev(['Hi', 'Bye'], {withoutStack: true}); + assertConsoleErrorDev(['Hi', 'Bye']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleErrorDev(expected) @@ -2592,7 +1967,7 @@ describe('ReactInternalTestUtils console assertions', () => { it('fails if the %s argument number is greater than args', () => { const message = expectToThrowFailure(() => { console.error('Hi %s'); - assertConsoleErrorDev(['Hi'], {withoutStack: true}); + assertConsoleErrorDev(['Hi']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleErrorDev(expected) @@ -2607,7 +1982,7 @@ describe('ReactInternalTestUtils console assertions', () => { const message = expectToThrowFailure(() => { console.error('Hi %s'); console.error('Bye %s'); - assertConsoleErrorDev(['Hi', 'Bye'], {withoutStack: true}); + assertConsoleErrorDev(['Hi', 'Bye']); }); expect(message).toMatchInlineSnapshot(` "assertConsoleErrorDev(expected) @@ -2812,27 +2187,21 @@ describe('ReactInternalTestUtils console assertions', () => { it('expands [Server] to ANSI escape sequence for server badge', () => { const badge = '\u001b[0m\u001b[7m Server \u001b[0m'; console.error(badge + 'Error: something went wrong'); - assertConsoleErrorDev([ - ['[Server] Error: something went wrong', {withoutStack: true}], - ]); + assertConsoleErrorDev(['[Server] Error: something went wrong']); }); // @gate __DEV__ it('expands [Prerender] to ANSI escape sequence for server badge', () => { const badge = '\u001b[0m\u001b[7m Prerender \u001b[0m'; console.error(badge + 'Error: something went wrong'); - assertConsoleErrorDev([ - ['[Prerender] Error: something went wrong', {withoutStack: true}], - ]); + assertConsoleErrorDev(['[Prerender] Error: something went wrong']); }); // @gate __DEV__ it('expands [Cache] to ANSI escape sequence for server badge', () => { const badge = '\u001b[0m\u001b[7m Cache \u001b[0m'; console.error(badge + 'Error: something went wrong'); - assertConsoleErrorDev([ - ['[Cache] Error: something went wrong', {withoutStack: true}], - ]); + assertConsoleErrorDev(['[Cache] Error: something went wrong']); }); }); diff --git a/packages/internal-test-utils/consoleMock.js b/packages/internal-test-utils/consoleMock.js index 8f33d807e64..ee7c486d780 100644 --- a/packages/internal-test-utils/consoleMock.js +++ b/packages/internal-test-utils/consoleMock.js @@ -290,26 +290,11 @@ export function createLogAssertion( } } - const withoutStack = options.withoutStack; - - if (consoleMethod === 'log' && withoutStack !== undefined) { - throwFormattedError( - `Do not pass withoutStack to assertConsoleLogDev, console.log does not have component stacks.`, - ); - } else if (withoutStack !== undefined && withoutStack !== true) { - throwFormattedError( - `The second argument must be {withoutStack: true}.` + - `\n\nInstead received ${JSON.stringify(options)}.`, - ); - } - const observedLogs = clearObservedErrors(); const receivedLogs = []; const missingExpectedLogs = Array.from(expectedMessages); const unexpectedLogs = []; - const unexpectedMissingComponentStack = []; - const unexpectedIncludingComponentStack = []; const unexpectedMissingErrorStack = []; const unexpectedIncludingErrorStack = []; const logsMismatchingFormat = []; @@ -334,72 +319,12 @@ export function createLogAssertion( } let expectedMessage; - let expectedWithoutStack; const expectedMessageOrArray = expectedMessages[index]; - if ( - expectedMessageOrArray != null && - Array.isArray(expectedMessageOrArray) - ) { - // Should be in the local form assert([['log', {withoutStack: true}]]) - - // Some validations for common mistakes. - if (expectedMessageOrArray.length === 1) { - throwFormattedError( - `Did you forget to remove the array around the log?` + - `\n\nThe expected message for ${matcherName}() must be a string or an array of length 2, but there's only one item in the array. If this is intentional, remove the extra array.`, - ); - } else if (expectedMessageOrArray.length !== 2) { - throwFormattedError( - `The expected message for ${matcherName}() must be a string or an array of length 2. ` + - `Instead received ${expectedMessageOrArray}.`, - ); - } else if (consoleMethod === 'log') { - // We don't expect any console.log calls to have a stack. - throwFormattedError( - `Do not pass withoutStack to assertConsoleLogDev logs, console.log does not have component stacks.`, - ); - } - - // Format is correct, check the values. - const currentExpectedMessage = expectedMessageOrArray[0]; - const currentExpectedOptions = expectedMessageOrArray[1]; - if ( - typeof currentExpectedMessage !== 'string' || - typeof currentExpectedOptions !== 'object' || - currentExpectedOptions.withoutStack !== true - ) { - throwFormattedError( - `Log entries that are arrays must be of the form [string, {withoutStack: true}]` + - `\n\nInstead received [${typeof currentExpectedMessage}, ${JSON.stringify( - currentExpectedOptions, - )}].`, - ); - } - - expectedMessage = normalizeExpectedMessage(currentExpectedMessage); - expectedWithoutStack = expectedMessageOrArray[1].withoutStack; - } else if (typeof expectedMessageOrArray === 'string') { + if (typeof expectedMessageOrArray === 'string') { expectedMessage = normalizeExpectedMessage(expectedMessageOrArray); - // withoutStack: inherit from global option - simplify when withoutStack is removed. - if (consoleMethod === 'log') { - expectedWithoutStack = true; - } else { - expectedWithoutStack = withoutStack; - } - } else if ( - typeof expectedMessageOrArray === 'object' && - expectedMessageOrArray != null && - expectedMessageOrArray.withoutStack != null - ) { - // Special case for common case of a wrong withoutStack value. - throwFormattedError( - `Did you forget to wrap a log with withoutStack in an array?` + - `\n\nThe expected message for ${matcherName}() must be a string or an array of length 2.` + - `\n\nInstead received ${JSON.stringify(expectedMessageOrArray)}.`, - ); } else if (expectedMessageOrArray != null) { throwFormattedError( - `The expected message for ${matcherName}() must be a string or an array of length 2. ` + + `The expected message for ${matcherName}() must be a string. ` + `Instead received ${JSON.stringify(expectedMessageOrArray)}.`, ); } @@ -499,18 +424,6 @@ export function createLogAssertion( } if (matchesExpectedMessage) { - // withoutStack: Check for unexpected/missing component stacks. - // These checks can be simplified when withoutStack is removed. - if (isLikelyAComponentStack(normalizedMessage)) { - if (expectedWithoutStack === true && !hasErrorStack) { - // Only report unexpected component stack if it's not an error stack - // (error stacks look like component stacks after normalization) - unexpectedIncludingComponentStack.push(normalizedMessage); - } - } else if (expectedWithoutStack !== true && !expectsErrorStack) { - unexpectedMissingComponentStack.push(normalizedMessage); - } - // Check for unexpected/missing error stacks if (hasErrorStack && !expectsErrorStack) { // Error stack is present but \n in was not in the expected message @@ -538,12 +451,7 @@ export function createLogAssertion( function printDiff() { return `${diff( expectedMessages - .map(messageOrTuple => { - const message = Array.isArray(messageOrTuple) - ? messageOrTuple[0] - : messageOrTuple; - return message.replace('\n', ' '); - }) + .map(message => message.replace('\n', ' ')) .join('\n'), receivedLogs.map(message => message.replace('\n', ' ')).join('\n'), { @@ -582,36 +490,6 @@ export function createLogAssertion( ); } - // Any logs that include a component stack but shouldn't. - if (unexpectedIncludingComponentStack.length > 0) { - throwFormattedError( - `${unexpectedIncludingComponentStack - .map( - stack => - `Unexpected component stack for:\n ${printReceived(stack)}`, - ) - .join( - '\n\n', - )}\n\nIf this ${logName()} should include a component stack, remove {withoutStack: true} from this ${logName()}.` + - `\nIf all ${logName()}s should include the component stack, you may need to remove {withoutStack: true} from the ${matcherName} call.`, - ); - } - - // Any logs that are missing a component stack without withoutStack. - if (unexpectedMissingComponentStack.length > 0) { - throwFormattedError( - `${unexpectedMissingComponentStack - .map( - stack => - `Missing component stack for:\n ${printReceived(stack)}`, - ) - .join( - '\n\n', - )}\n\nIf this ${logName()} should omit a component stack, pass [log, {withoutStack: true}].` + - `\nIf all ${logName()}s should omit the component stack, add {withoutStack: true} to the ${matcherName} call.`, - ); - } - // Any logs that include an error stack trace but \n in wasn't expected. if (unexpectedIncludingErrorStack.length > 0) { throwFormattedError( diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index 0a543a3464c..9897c28d7e8 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -1514,16 +1514,13 @@ describe('ReactFlight', () => { }, }; const transport = ReactNoopFlightServer.render(); - assertConsoleErrorDev( - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Objects with toJSON methods are not supported. ' + - 'Convert it manually to a simple value before passing it to props.\n' + - ' \n' + - ' ^^^^^^^^^^^^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Objects with toJSON methods are not supported. ' + + 'Convert it manually to a simple value before passing it to props.\n' + + ' \n' + + ' ^^^^^^^^^^^^^^^', + ]); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ @@ -1545,14 +1542,11 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render(
Womp womp: {new MyError('spaghetti')}
, ); - assertConsoleErrorDev( - [ - 'Error objects cannot be rendered as text children. Try formatting it using toString().\n' + - '
Womp womp: {Error}
\n' + - ' ^^^^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Error objects cannot be rendered as text children. Try formatting it using toString().\n' + + '
Womp womp: {Error}
\n' + + ' ^^^^^^^', + ]); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ @@ -1565,15 +1559,12 @@ describe('ReactFlight', () => { it('should warn in DEV if a special object is passed to a host component', () => { const transport = ReactNoopFlightServer.render(); - assertConsoleErrorDev( - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Math objects are not supported.\n' + - ' \n' + - ' ^^^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Math objects are not supported.\n' + + ' \n' + + ' ^^^^^^', + ]); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ @@ -1589,15 +1580,12 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render( , ); - assertConsoleErrorDev( - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Objects with symbol properties like Symbol.iterator are not supported.\n' + - ' \n' + - ' ^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Objects with symbol properties like Symbol.iterator are not supported.\n' + + ' \n' + + ' ^^^^', + ]); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ @@ -1620,16 +1608,13 @@ describe('ReactFlight', () => { } const Client = clientReference(ClientImpl); const transport = ReactNoopFlightServer.render(); - assertConsoleErrorDev( - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Objects with toJSON methods are not supported. ' + - 'Convert it manually to a simple value before passing it to props.\n' + - ' <... value={{toJSON: ...}}>\n' + - ' ^^^^^^^^^^^^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Objects with toJSON methods are not supported. ' + + 'Convert it manually to a simple value before passing it to props.\n' + + ' <... value={{toJSON: ...}}>\n' + + ' ^^^^^^^^^^^^^^^', + ]); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ @@ -1655,16 +1640,13 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render( Current date: {obj}, ); - assertConsoleErrorDev( - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Objects with toJSON methods are not supported. ' + - 'Convert it manually to a simple value before passing it to props.\n' + - ' <>Current date: {{toJSON: ...}}\n' + - ' ^^^^^^^^^^^^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Objects with toJSON methods are not supported. ' + + 'Convert it manually to a simple value before passing it to props.\n' + + ' <>Current date: {{toJSON: ...}}\n' + + ' ^^^^^^^^^^^^^^^', + ]); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ @@ -1683,15 +1665,12 @@ describe('ReactFlight', () => { } const Client = clientReference(ClientImpl); const transport = ReactNoopFlightServer.render(); - assertConsoleErrorDev( - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Math objects are not supported.\n' + - ' <... value={Math}>\n' + - ' ^^^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Math objects are not supported.\n' + + ' <... value={Math}>\n' + + ' ^^^^^^', + ]); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ @@ -1712,15 +1691,12 @@ describe('ReactFlight', () => { const transport = ReactNoopFlightServer.render( , ); - assertConsoleErrorDev( - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Objects with symbol properties like Symbol.iterator are not supported.\n' + - ' <... value={{}}>\n' + - ' ^^^^', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Objects with symbol properties like Symbol.iterator are not supported.\n' + + ' <... value={{}}>\n' + + ' ^^^^', + ]); ReactNoopFlightClient.read(transport); @@ -1744,13 +1720,10 @@ describe('ReactFlight', () => { ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Objects with symbol properties like Symbol.iterator are not supported.\n' + - ' <... value={{}}>\n' + - ' ^^^^', - {withoutStack: true}, - ], + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Objects with symbol properties like Symbol.iterator are not supported.\n' + + ' <... value={{}}>\n' + + ' ^^^^', 'Only plain objects can be passed to Client Components from Server Components. ' + 'Objects with symbol properties like Symbol.iterator are not supported.\n' + ' <... value={{}}>\n' + @@ -1769,13 +1742,10 @@ describe('ReactFlight', () => { ); ReactNoopFlightClient.read(transport); assertConsoleErrorDev([ - [ - 'Only plain objects can be passed to Client Components from Server Components. ' + - 'Math objects are not supported.\n' + - ' [..., Math,

]\n' + - ' ^^^^', - {withoutStack: true}, - ], + 'Only plain objects can be passed to Client Components from Server Components. ' + + 'Math objects are not supported.\n' + + ' [..., Math,

]\n' + + ' ^^^^', 'Only plain objects can be passed to Client Components from Server Components. ' + 'Math objects are not supported.\n' + ' [..., Math,

]\n' + diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js index f985d065976..a57b6df671f 100644 --- a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js +++ b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js @@ -642,35 +642,32 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in Component (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillMount has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + - '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: Component', - 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - "* If you're updating state whenever props change, refactor your code to use " + - 'memoization techniques or move it to static getDerivedStateFromProps. ' + - 'Learn more at: https://react.dev/link/derived-state\n' + - '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: Component', - 'componentWillUpdate has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: Component', - ], - {withoutStack: true}, - ); + assertConsoleWarnDev([ + 'componentWillMount has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: Component', + 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + "* If you're updating state whenever props change, refactor your code to use " + + 'memoization techniques or move it to static getDerivedStateFromProps. ' + + 'Learn more at: https://react.dev/link/derived-state\n' + + '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: Component', + 'componentWillUpdate has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: Component', + ]); }); it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', async () => { @@ -708,35 +705,32 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in Component (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillMount has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + - '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: Component', - 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - "* If you're updating state whenever props change, refactor your code to use " + - 'memoization techniques or move it to static getDerivedStateFromProps. ' + - 'Learn more at: https://react.dev/link/derived-state\n' + - '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: Component', - 'componentWillUpdate has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: Component', - ], - {withoutStack: true}, - ); + assertConsoleWarnDev([ + 'componentWillMount has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: Component', + 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + "* If you're updating state whenever props change, refactor your code to use " + + 'memoization techniques or move it to static getDerivedStateFromProps. ' + + 'Learn more at: https://react.dev/link/derived-state\n' + + '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: Component', + 'componentWillUpdate has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: Component', + ]); await act(() => { root.render(); @@ -810,25 +804,22 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in AllLegacyLifecycles (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillMount has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + - '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: AllLegacyLifecycles', - 'componentWillUpdate has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: AllLegacyLifecycles', - ], - {withoutStack: true}, - ); + assertConsoleWarnDev([ + 'componentWillMount has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: AllLegacyLifecycles', + 'componentWillUpdate has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: AllLegacyLifecycles', + ]); class WillMount extends React.Component { state = {}; @@ -877,18 +868,15 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in WillMountAndUpdate (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillMount has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + - '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: WillMountAndUpdate', - ], - {withoutStack: true}, - ); + assertConsoleWarnDev([ + 'componentWillMount has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: WillMountAndUpdate', + ]); class WillReceiveProps extends React.Component { state = {}; @@ -912,23 +900,18 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in WillReceiveProps (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - "* If you're updating state whenever props change, refactor your code to use " + - 'memoization techniques or move it to static getDerivedStateFromProps. ' + - 'Learn more at: https://react.dev/link/derived-state\n' + - '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: WillReceiveProps', - ], - { - withoutStack: true, - }, - ); + assertConsoleWarnDev([ + 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + "* If you're updating state whenever props change, refactor your code to use " + + 'memoization techniques or move it to static getDerivedStateFromProps. ' + + 'Learn more at: https://react.dev/link/derived-state\n' + + '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: WillReceiveProps', + ]); }); it('should warn about deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', async () => { @@ -958,25 +941,22 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in AllLegacyLifecycles (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillMount has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + - '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: AllLegacyLifecycles', - 'componentWillUpdate has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: AllLegacyLifecycles', - ], - {withoutStack: true}, - ); + assertConsoleWarnDev([ + 'componentWillMount has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: AllLegacyLifecycles', + 'componentWillUpdate has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: AllLegacyLifecycles', + ]); class WillMount extends React.Component { state = {}; @@ -1023,20 +1003,15 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in WillMountAndUpdate (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillMount has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + - '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: WillMountAndUpdate', - ], - { - withoutStack: true, - }, - ); + assertConsoleWarnDev([ + 'componentWillMount has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: WillMountAndUpdate', + ]); class WillReceiveProps extends React.Component { state = {}; @@ -1059,23 +1034,18 @@ describe('ReactComponentLifeCycle', () => { 'https://react.dev/link/unsafe-component-lifecycles\n' + ' in WillReceiveProps (at **)', ]); - assertConsoleWarnDev( - [ - 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - "* If you're updating state whenever props change, refactor your code to use " + - 'memoization techniques or move it to static getDerivedStateFromProps. ' + - 'Learn more at: https://react.dev/link/derived-state\n' + - '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: WillReceiveProps', - ], - { - withoutStack: true, - }, - ); + assertConsoleWarnDev([ + 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + "* If you're updating state whenever props change, refactor your code to use " + + 'memoization techniques or move it to static getDerivedStateFromProps. ' + + 'Learn more at: https://react.dev/link/derived-state\n' + + '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: WillReceiveProps', + ]); }); it('should warn if getDerivedStateFromProps returns undefined', async () => { @@ -1162,35 +1132,32 @@ describe('ReactComponentLifeCycle', () => { await act(() => { root.render(); }); - assertConsoleWarnDev( - [ - 'componentWillMount has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + - '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: MyComponent', - 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - "* If you're updating state whenever props change, refactor your code to use " + - 'memoization techniques or move it to static getDerivedStateFromProps. ' + - 'Learn more at: https://react.dev/link/derived-state\n' + - '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: MyComponent', - 'componentWillUpdate has been renamed, and is not recommended for use. ' + - 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + - '* Move data fetching code or side effects to componentDidUpdate.\n' + - '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + - 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + - 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + - 'Please update the following components: MyComponent', - ], - {withoutStack: true}, - ); + assertConsoleWarnDev([ + 'componentWillMount has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' + + '* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: MyComponent', + 'componentWillReceiveProps has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + "* If you're updating state whenever props change, refactor your code to use " + + 'memoization techniques or move it to static getDerivedStateFromProps. ' + + 'Learn more at: https://react.dev/link/derived-state\n' + + '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: MyComponent', + 'componentWillUpdate has been renamed, and is not recommended for use. ' + + 'See https://react.dev/link/unsafe-component-lifecycles for details.\n\n' + + '* Move data fetching code or side effects to componentDidUpdate.\n' + + '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. ' + + 'In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, ' + + 'you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\n' + + 'Please update the following components: MyComponent', + ]); expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']); log.length = 0; @@ -1488,30 +1455,27 @@ describe('ReactComponentLifeCycle', () => { await act(() => { root.render(); }); - assertConsoleWarnDev( - [ - `componentWillMount has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details. + assertConsoleWarnDev([ + `componentWillMount has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details. * Move code with side effects to componentDidMount, and set initial state in the constructor. * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder. Please update the following components: MyComponent`, - `componentWillReceiveProps has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details. + `componentWillReceiveProps has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details. * Move data fetching code or side effects to componentDidUpdate. * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://react.dev/link/derived-state * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder. Please update the following components: MyComponent`, - `componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details. + `componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details. * Move data fetching code or side effects to componentDidUpdate. * Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run \`npx react-codemod rename-unsafe-lifecycles\` in your project source folder. Please update the following components: MyComponent`, - ], - {withoutStack: true}, - ); + ]); // Dedupe check (update and instantiate new) await act(() => { diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index f87de5c2ef3..5397de0e251 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -195,13 +195,10 @@ describe('ReactDOM', () => { 'Invalid argument passed as callback. Expected a function. Instead ' + 'received: no', ); - assertConsoleErrorDev( - [ - 'Expected the last optional `callback` argument to be a function. Instead received: no.', - 'Expected the last optional `callback` argument to be a function. Instead received: no.', - ], - {withoutStack: 2}, - ); + assertConsoleErrorDev([ + 'Expected the last optional `callback` argument to be a function. Instead received: no.', + 'Expected the last optional `callback` argument to be a function. Instead received: no.', + ]); await expect(async () => { await act(() => { @@ -211,13 +208,10 @@ describe('ReactDOM', () => { 'Invalid argument passed as callback. Expected a function. Instead ' + 'received: [object Object]', ); - assertConsoleErrorDev( - [ - "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }", - "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.", - ], - {withoutStack: 2}, - ); + assertConsoleErrorDev([ + "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }", + "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.", + ]); await expect(async () => { await act(() => { @@ -227,13 +221,10 @@ describe('ReactDOM', () => { 'Invalid argument passed as callback. Expected a function. Instead ' + 'received: [object Object]', ); - assertConsoleErrorDev( - [ - 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', - 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', - ], - {withoutStack: 2}, - ); + assertConsoleErrorDev([ + 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', + 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', + ]); }); // @gate !disableLegacyMode @@ -261,13 +252,10 @@ describe('ReactDOM', () => { 'Invalid argument passed as callback. Expected a function. Instead ' + 'received: no', ); - assertConsoleErrorDev( - [ - 'Expected the last optional `callback` argument to be a function. Instead received: no.', - 'Expected the last optional `callback` argument to be a function. Instead received: no.', - ], - {withoutStack: 2}, - ); + assertConsoleErrorDev([ + 'Expected the last optional `callback` argument to be a function. Instead received: no.', + 'Expected the last optional `callback` argument to be a function. Instead received: no.', + ]); ReactDOM.render(, myDiv); // Re-mount await expect(async () => { @@ -278,13 +266,10 @@ describe('ReactDOM', () => { 'Invalid argument passed as callback. Expected a function. Instead ' + 'received: [object Object]', ); - assertConsoleErrorDev( - [ - "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.", - "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.", - ], - {withoutStack: 2}, - ); + assertConsoleErrorDev([ + "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.", + "Expected the last optional `callback` argument to be a function. Instead received: { foo: 'bar' }.", + ]); ReactDOM.render(, myDiv); // Re-mount await expect(async () => { @@ -295,13 +280,10 @@ describe('ReactDOM', () => { 'Invalid argument passed as callback. Expected a function. Instead ' + 'received: [object Object]', ); - assertConsoleErrorDev( - [ - 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', - 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', - ], - {withoutStack: 2}, - ); + assertConsoleErrorDev([ + 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', + 'Expected the last optional `callback` argument to be a function. Instead received: Foo { a: 1, b: 2 }.', + ]); }); it('preserves focus', async () => { diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index bd0c6107f37..fd13b9cb505 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -3590,14 +3590,11 @@ describe('ReactDOMFizzServer', () => { onRecoverableError(error, errorInfo) { expect(error.digest).toBe('a digest'); expect(errorInfo.digest).toBe(undefined); - assertConsoleErrorDev( - [ - 'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' + - ' This property is no longer provided as part of errorInfo but can be accessed as a property' + - ' of the Error instance itself.', - ], - {withoutStack: true}, - ); + assertConsoleErrorDev([ + 'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' + + ' This property is no longer provided as part of errorInfo but can be accessed as a property' + + ' of the Error instance itself.', + ]); }, }, ); @@ -7770,10 +7767,7 @@ describe('ReactDOMFizzServer', () => { , ); assertConsoleErrorDev([ - [ - 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', - {withoutStack: true}, - ], + 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', 'In HTML, cannot be a child of .\nThis will cause a hydration error.' + '\n' + '\n ' + @@ -7788,10 +7782,7 @@ describe('ReactDOMFizzServer', () => { ' cannot contain a nested .\nSee this log for the ancestor stack trace.' + '\n in html (at **)' + '\n in App (at **)', - [ - 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', - {withoutStack: true}, - ], + 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', ]); await root.unmount(); @@ -7886,10 +7877,7 @@ describe('ReactDOMFizzServer', () => { , ); assertConsoleErrorDev([ - [ - 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', - {withoutStack: true}, - ], + 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', 'In HTML, cannot be a child of .\nThis will cause a hydration error.' + '\n' + '\n ' + @@ -7904,10 +7892,7 @@ describe('ReactDOMFizzServer', () => { ' cannot contain a nested .\nSee this log for the ancestor stack trace.' + '\n in html (at **)' + '\n in App (at **)', - [ - 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', - {withoutStack: true}, - ], + 'Cannot render a outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this remove the `itemProp` prop. Otherwise, try moving this tag into the or of the Document.', ]); await root.unmount(); diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index ed3d3e08805..1766db2de8b 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -520,10 +520,7 @@ describe('ReactDOMFloat', () => { ); await waitForAll([]); assertConsoleErrorDev([ - [ - 'Cannot render