From 277420803947724b43c47bbc47d3a353553868f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Mon, 10 Jun 2024 18:41:56 -0400 Subject: [PATCH] Remove Warning: prefix and toString on console Arguments (#29839) Basically make `console.error` and `console.warn` behave like normal - when a component stack isn't appended. I need this because I need to be able to print rich logs with the component stack option and to be able to disable instrumentation completely in `console.createTask` environments that don't need it. Currently we can't print logs with richer objects because they're toString:ed first. In practice, pretty much all arguments we log are already toString:ed so it's not necessary anyway. Some might be like a number. So it would only be a problem if some environment can't handle proper consoles but then it's up to that environment to toString it before logging. The `Warning: ` prefix is historic and is both noisy and confusing. It's mostly unnecessary since the UI surrounding `console.error` and `console.warn` tend to have visual treatment around it anyway. However, it's actively misleading when `console.error` gets prefixed with a Warning that we consider an error level. There's an argument to be made that some of our `console.error` don't make the bar for an error but then the argument is to downgrade each of those to `console.warn` - not to brand all our actual error logging with `Warning: `. Apparently something needs to change in React Native before landing this because it depends on the prefix somehow which probably doesn't make sense already. --- .../shouldIgnoreConsoleError.js | 3 + .../__tests__/ReactCacheOld-test.internal.js | 2 +- .../src/__tests__/inspectedElement-test.js | 2 +- .../src/__tests__/setupTests.js | 21 ++-- .../src/__tests__/store-test.js | 4 +- .../react-devtools-shell/src/app/index.js | 12 +- .../src/client/validateDOMNesting.js | 8 +- .../__tests__/CSSPropertyOperations-test.js | 18 +-- .../__tests__/DOMPropertyOperations-test.js | 2 +- .../src/__tests__/ReactComponent-test.js | 12 +- .../__tests__/ReactComponentLifeCycle-test.js | 8 +- .../__tests__/ReactCompositeComponent-test.js | 22 ++-- .../ReactCompositeComponentState-test.js | 6 +- .../react-dom/src/__tests__/ReactDOM-test.js | 20 ++-- .../src/__tests__/ReactDOMAttribute-test.js | 10 +- .../src/__tests__/ReactDOMComponent-test.js | 108 ++++++++---------- .../__tests__/ReactDOMComponentTree-test.js | 2 +- .../src/__tests__/ReactDOMFizzServer-test.js | 10 +- .../src/__tests__/ReactDOMFloat-test.js | 10 +- .../src/__tests__/ReactDOMForm-test.js | 2 +- .../__tests__/ReactDOMHydrationDiff-test.js | 18 +-- .../src/__tests__/ReactDOMInput-test.js | 46 ++++---- .../__tests__/ReactDOMInvalidARIAHook-test.js | 10 +- .../src/__tests__/ReactDOMOption-test.js | 2 +- .../src/__tests__/ReactDOMSelect-test.js | 8 +- .../ReactDOMServerIntegrationElements-test.js | 6 +- ...tDOMServerIntegrationLegacyContext-test.js | 2 +- .../ReactDOMServerIntegrationRefs-test.js | 2 +- .../ReactDOMServerLifecycles-test.js | 2 +- ...ctDOMShorthandCSSPropertyCollision-test.js | 16 +-- .../ReactDOMSingletonComponents-test.js | 2 +- .../src/__tests__/ReactDOMTextarea-test.js | 8 +- .../ReactDeprecationWarnings-test.js | 10 +- .../__tests__/ReactFunctionComponent-test.js | 14 +-- ...eactLegacyErrorBoundaries-test.internal.js | 4 +- .../src/__tests__/ReactLegacyMount-test.js | 4 +- .../src/__tests__/ReactLegacyUpdates-test.js | 4 +- .../__tests__/ReactMountDestruction-test.js | 4 +- .../src/__tests__/ReactMultiChildText-test.js | 4 +- .../src/__tests__/ReactRenderDocument-test.js | 2 +- .../__tests__/ReactServerRendering-test.js | 14 +-- .../ReactServerRenderingHydration-test.js | 6 +- .../src/__tests__/ReactUpdates-test.js | 4 +- .../src/__tests__/findDOMNodeFB-test.js | 4 +- packages/react-dom/src/__tests__/refs-test.js | 8 +- .../src/__tests__/validateDOMNesting-test.js | 2 +- .../__tests__/trustedTypes-test.internal.js | 4 +- .../src/ReactNativeFiberHostComponent.js | 2 +- .../__tests__/ReactFabric-test.internal.js | 10 +- .../ReactNativeMount-test.internal.js | 12 +- .../__tests__/DebugTracing-test.internal.js | 2 +- .../src/__tests__/ReactHooks-test.internal.js | 42 +++---- .../ReactHooksWithNoopRenderer-test.js | 26 ++--- ...tIncrementalErrorHandling-test.internal.js | 10 +- .../ReactIncrementalSideEffects-test.js | 4 +- .../src/__tests__/ReactIsomorphicAct-test.js | 2 +- .../src/__tests__/ReactLazy-test.internal.js | 2 +- .../src/__tests__/ReactMemo-test.js | 4 +- .../__tests__/ReactSuspenseCallback-test.js | 2 +- .../src/__tests__/ReactSuspenseList-test.js | 16 +-- .../src/__tests__/ReactUse-test.js | 2 +- .../src/__tests__/ReactFlightDOMForm-test.js | 4 +- .../ReactTestRenderer-test.internal.js | 4 +- .../react/src/__tests__/ReactChildren-test.js | 22 ++-- .../ReactCoffeeScriptClass-test.coffee | 8 +- .../__tests__/ReactContextValidator-test.js | 16 +-- .../react/src/__tests__/ReactES6Class-test.js | 15 +-- .../src/__tests__/ReactElementClone-test.js | 2 +- .../ReactElementValidator-test.internal.js | 32 +++--- .../ReactJSXElementValidator-test.js | 6 +- .../src/__tests__/ReactJSXRuntime-test.js | 4 +- .../src/__tests__/ReactPureComponent-test.js | 4 +- .../src/__tests__/ReactStrictMode-test.js | 22 ++-- .../__tests__/ReactTypeScriptClass-test.ts | 12 +- .../createReactClassIntegration-test.js | 18 +-- .../react/src/__tests__/forwardRef-test.js | 2 +- packages/shared/consoleWithStackDev.js | 16 +-- 77 files changed, 397 insertions(+), 418 deletions(-) diff --git a/packages/internal-test-utils/shouldIgnoreConsoleError.js b/packages/internal-test-utils/shouldIgnoreConsoleError.js index c1e4ecb75bba1..383650d25a0b7 100644 --- a/packages/internal-test-utils/shouldIgnoreConsoleError.js +++ b/packages/internal-test-utils/shouldIgnoreConsoleError.js @@ -7,6 +7,9 @@ module.exports = function shouldIgnoreConsoleError(format, args) { args[0] != null && ((typeof args[0] === 'object' && typeof args[0].message === 'string' && + // This specific log has the same signature as error logging. + // The trick is to get rid of this whole file. + !format.includes('Failed to serialize an action') && typeof args[0].stack === 'string') || (typeof args[0] === 'string' && args[0].indexOf('An error occurred in ') === 0)) diff --git a/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js index 08318d5f512fe..c448a25b83179 100644 --- a/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js +++ b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js @@ -182,7 +182,7 @@ describe('ReactCache', () => { await waitForAll(['App', 'Loading...']); }).toErrorDev([ 'Invalid key type. Expected a string, number, symbol, or ' + - 'boolean, but instead received: Hi,100\n\n' + + "boolean, but instead received: [ 'Hi', 100 ]\n\n" + 'To use non-primitive values as keys, you must pass a hash ' + 'function as the second argument to createResource().', ]); diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js index 3072cc2397622..a49f2d464bc65 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js @@ -2556,7 +2556,7 @@ describe('InspectedElement', () => { }; await withErrorsOrWarningsIgnored( - ['Warning: Each child in a list should have a unique "key" prop.'], + ['Each child in a list should have a unique "key" prop.'], async () => { await utils.actAsync(() => render(), diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js index ea9aefa588122..b78a3d162629c 100644 --- a/packages/react-devtools-shared/src/__tests__/setupTests.js +++ b/packages/react-devtools-shared/src/__tests__/setupTests.js @@ -154,23 +154,22 @@ beforeEach(() => { const originalConsoleError = console.error; console.error = (...args) => { - const firstArg = args[0]; - if ( - firstArg === 'Warning: React instrumentation encountered an error: %s' - ) { + let firstArg = args[0]; + if (typeof firstArg === 'string' && firstArg.startsWith('Warning: ')) { + // Older React versions might use the Warning: prefix. I'm not sure + // if they use this code path. + firstArg = firstArg.slice(9); + } + if (firstArg === 'React instrumentation encountered an error: %s') { // Rethrow errors from React. throw args[1]; } else if ( typeof firstArg === 'string' && - (firstArg.startsWith( - "Warning: It looks like you're using the wrong act()", - ) || + (firstArg.startsWith("It looks like you're using the wrong act()") || firstArg.startsWith( - 'Warning: The current testing environment is not configured to support act', + 'The current testing environment is not configured to support act', ) || - firstArg.startsWith( - 'Warning: You seem to have overlapping act() calls', - )) + firstArg.startsWith('You seem to have overlapping act() calls')) ) { // DevTools intentionally wraps updates with acts from both DOM and test-renderer, // since test updates are expected to impact both renderers. diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 6e065cdc93906..75435114975c0 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -1927,7 +1927,7 @@ describe('Store', () => { } withErrorsOrWarningsIgnored( - ['Warning: Each child in a list should have a unique "key" prop'], + ['Each child in a list should have a unique "key" prop'], () => { act(() => render()); }, @@ -1952,7 +1952,7 @@ describe('Store', () => { } withErrorsOrWarningsIgnored( - ['Warning: Each child in a list should have a unique "key" prop'], + ['Each child in a list should have a unique "key" prop'], () => { act(() => render()); }, diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js index 69f8566cbe6b4..11f13bec47b22 100644 --- a/packages/react-devtools-shell/src/app/index.js +++ b/packages/react-devtools-shell/src/app/index.js @@ -32,8 +32,18 @@ ignoreErrors([ 'Warning: %s is deprecated in StrictMode.', // findDOMNode 'Warning: ReactDOM.render was removed in React 19', 'Warning: react-test-renderer is deprecated', + // Ignore prefixed and not prefixed since I don't know which + // React versions are being tested by this code. + 'Legacy context API', + 'Unsafe lifecycle methods', + '%s is deprecated in StrictMode.', // findDOMNode + 'ReactDOM.render was removed in React 19', + 'react-test-renderer is deprecated', +]); +ignoreWarnings([ + 'Warning: componentWillReceiveProps has been renamed', + 'componentWillReceiveProps has been renamed', ]); -ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']); ignoreLogs([]); const unmountFunctions: Array<() => void | boolean> = []; diff --git a/packages/react-dom-bindings/src/client/validateDOMNesting.js b/packages/react-dom-bindings/src/client/validateDOMNesting.js index b7e99757cac58..4ac56d4463212 100644 --- a/packages/react-dom-bindings/src/client/validateDOMNesting.js +++ b/packages/react-dom-bindings/src/client/validateDOMNesting.js @@ -484,7 +484,7 @@ function validateDOMNesting( // TODO: Format this as a linkified "diff view" with props instead of // a stack trace since the stack trace format is now for owner stacks. console['error']( - 'Warning: In HTML, %s cannot be a child of <%s>.%s\n' + + 'In HTML, %s cannot be a child of <%s>.%s\n' + 'This will cause a hydration error.%s', tagDisplayName, ancestorTag, @@ -498,7 +498,7 @@ function validateDOMNesting( // TODO: Format this as a linkified "diff view" with props instead of // a stack trace since the stack trace format is now for owner stacks. console['error']( - 'Warning: In HTML, %s cannot be a descendant of <%s>.\n' + + 'In HTML, %s cannot be a descendant of <%s>.\n' + 'This will cause a hydration error.%s', tagDisplayName, ancestorTag, @@ -530,7 +530,7 @@ function validateTextNesting(childText: string, parentTag: string): boolean { // TODO: Format this as a linkified "diff view" with props instead of // a stack trace since the stack trace format is now for owner stacks. console['error']( - 'Warning: In HTML, text nodes cannot be a child of <%s>.\n' + + 'In HTML, text nodes cannot be a child of <%s>.\n' + 'This will cause a hydration error.%s', parentTag, getCurrentParentStackInDev(), @@ -542,7 +542,7 @@ function validateTextNesting(childText: string, parentTag: string): boolean { // TODO: Format this as a linkified "diff view" with props instead of // a stack trace since the stack trace format is now for owner stacks. console['error']( - 'Warning: In HTML, whitespace text nodes cannot be a child of <%s>. ' + + 'In HTML, whitespace text nodes cannot be a child of <%s>. ' + "Make sure you don't have any extra whitespace between tags on " + 'each line of your source code.\n' + 'This will cause a hydration error.%s', diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js index 83679786cbbd2..bda95b8434d46 100644 --- a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js +++ b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js @@ -108,7 +108,7 @@ describe('CSSPropertyOperations', () => { root.render(); }); }).toErrorDev( - 'Warning: Unsupported style property background-color. Did you mean backgroundColor?' + + 'Unsupported style property background-color. Did you mean backgroundColor?' + '\n in div (at **)' + '\n in Comp (at **)', ); @@ -137,10 +137,10 @@ describe('CSSPropertyOperations', () => { root.render(); }); }).toErrorDev([ - 'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' + + 'Unsupported style property -ms-transform. Did you mean msTransform?' + '\n in div (at **)' + '\n in Comp (at **)', - 'Warning: Unsupported style property -webkit-transform. Did you mean WebkitTransform?' + + 'Unsupported style property -webkit-transform. Did you mean WebkitTransform?' + '\n in div (at **)' + '\n in Comp (at **)', ]); @@ -171,11 +171,11 @@ describe('CSSPropertyOperations', () => { }); }).toErrorDev([ // msTransform is correct already and shouldn't warn - 'Warning: Unsupported vendor-prefixed style property oTransform. ' + + 'Unsupported vendor-prefixed style property oTransform. ' + 'Did you mean OTransform?' + '\n in div (at **)' + '\n in Comp (at **)', - 'Warning: Unsupported vendor-prefixed style property webkitTransform. ' + + 'Unsupported vendor-prefixed style property webkitTransform. ' + 'Did you mean WebkitTransform?' + '\n in div (at **)' + '\n in Comp (at **)', @@ -207,11 +207,11 @@ describe('CSSPropertyOperations', () => { root.render(); }); }).toErrorDev([ - "Warning: Style property values shouldn't contain a semicolon. " + + "Style property values shouldn't contain a semicolon. " + 'Try "backgroundColor: blue" instead.' + '\n in div (at **)' + '\n in Comp (at **)', - "Warning: Style property values shouldn't contain a semicolon. " + + "Style property values shouldn't contain a semicolon. " + 'Try "color: red" instead.' + '\n in div (at **)' + '\n in Comp (at **)', @@ -234,7 +234,7 @@ describe('CSSPropertyOperations', () => { root.render(); }); }).toErrorDev( - 'Warning: `NaN` is an invalid value for the `fontSize` css style property.' + + '`NaN` is an invalid value for the `fontSize` css style property.' + '\n in div (at **)' + '\n in Comp (at **)', ); @@ -270,7 +270,7 @@ describe('CSSPropertyOperations', () => { root.render(); }); }).toErrorDev( - 'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' + + '`Infinity` is an invalid value for the `fontSize` css style property.' + '\n in div (at **)' + '\n in Comp (at **)', ); diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js index fb5281a02a8ec..cecc71b45a6c0 100644 --- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js +++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js @@ -1333,7 +1333,7 @@ describe('DOMPropertyOperations', () => { }); assertConsoleErrorDev([ - 'The `popoverTarget` prop expects the ID of an Element as a string. Received [object HTMLDivElement] instead.', + 'The `popoverTarget` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.', ]); // Dedupe warning diff --git a/packages/react-dom/src/__tests__/ReactComponent-test.js b/packages/react-dom/src/__tests__/ReactComponent-test.js index 1951f4ba73400..e5dd5ed88578d 100644 --- a/packages/react-dom/src/__tests__/ReactComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactComponent-test.js @@ -217,7 +217,7 @@ describe('ReactComponent', () => { root.render(); }); }).toErrorDev([ - 'Warning: Component "Component" contains the string ref "inner". ' + + 'Component "Component" contains the string ref "inner". ' + 'Support for string refs will be removed in a future major release. ' + 'We recommend using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' + @@ -711,7 +711,7 @@ describe('ReactComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: Functions are not valid as a React child. This may happen if ' + + 'Functions are not valid as a React child. This may happen if ' + 'you return Foo instead of from render. ' + 'Or maybe you meant to call this function rather than return it.\n' + ' {Foo}\n' + @@ -733,7 +733,7 @@ describe('ReactComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: Functions are not valid as a React child. This may happen if ' + + 'Functions are not valid as a React child. This may happen if ' + 'you return Foo instead of from render. ' + 'Or maybe you meant to call this function rather than return it.\n' + ' {Foo}\n' + @@ -756,7 +756,7 @@ describe('ReactComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: Functions are not valid as a React child. This may happen if ' + + 'Functions are not valid as a React child. This may happen if ' + 'you return Foo instead of from render. ' + 'Or maybe you meant to call this function rather than return it.\n' + ' {Foo}\n' + @@ -811,13 +811,13 @@ describe('ReactComponent', () => { root.render( (component = current)} />); }); }).toErrorDev([ - 'Warning: Functions are not valid as a React child. This may happen if ' + + 'Functions are not valid as a React child. This may happen if ' + 'you return Foo instead of from render. ' + 'Or maybe you meant to call this function rather than return it.\n' + '
{Foo}
\n' + ' in div (at **)\n' + ' in Foo (at **)', - 'Warning: Functions are not valid as a React child. This may happen if ' + + 'Functions are not valid as a React child. This may happen if ' + 'you return Foo instead of from render. ' + 'Or maybe you meant to call this function rather than return it.\n' + ' {Foo}\n' + diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js index 8a2c6af5cae50..c72fea8adf0d2 100644 --- a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js +++ b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js @@ -271,7 +271,7 @@ describe('ReactComponentLifeCycle', () => { root.render(); }); }).toErrorDev( - "Warning: Can't call setState on a component that is not yet mounted. " + + "Can't call setState on a component that is not yet mounted. " + 'This is a no-op, but it might indicate a bug in your application. ' + 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in the StatefulComponent component.', @@ -1504,20 +1504,20 @@ describe('ReactComponentLifeCycle', () => { }).toWarnDev( [ /* eslint-disable max-len */ - `Warning: componentWillMount has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details. + `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`, - `Warning: 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`, - `Warning: 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. diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js index 894afb39ba0cf..89d0b83abc3b1 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js @@ -313,7 +313,7 @@ describe('ReactCompositeComponent', () => { root.render(); }); }).toErrorDev( - "Warning: Can't call forceUpdate on a component that is not yet mounted. " + + "Can't call forceUpdate on a component that is not yet mounted. " + 'This is a no-op, but it might indicate a bug in your application. ' + 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in the MyComponent component.', @@ -347,7 +347,7 @@ describe('ReactCompositeComponent', () => { root.render(); }); }).toErrorDev( - "Warning: Can't call setState on a component that is not yet mounted. " + + "Can't call setState on a component that is not yet mounted. " + 'This is a no-op, but it might indicate a bug in your application. ' + 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in the MyComponent component.', @@ -484,7 +484,7 @@ describe('ReactCompositeComponent', () => { }); }).rejects.toThrow(TypeError); }).toErrorDev( - 'Warning: The component appears to have a render method, ' + + 'The component appears to have a render method, ' + "but doesn't extend React.Component. This is likely to cause errors. " + 'Change ClassWithRenderNotExtended to extend React.Component instead.', ); @@ -631,7 +631,7 @@ describe('ReactCompositeComponent', () => { instance.setState({bogus: true}); }); }).toErrorDev( - 'Warning: ClassComponent.shouldComponentUpdate(): Returned undefined instead of a ' + + 'ClassComponent.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', ); }); @@ -651,7 +651,7 @@ describe('ReactCompositeComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: Component has a method called ' + + 'Component has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', ); @@ -673,7 +673,7 @@ describe('ReactCompositeComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: Component has a method called ' + + 'Component has a method called ' + 'componentDidReceiveProps(). But there is no such lifecycle method. ' + 'If you meant to update the state in response to changing props, ' + 'use componentWillReceiveProps(). If you meant to fetch data or ' + @@ -699,7 +699,7 @@ describe('ReactCompositeComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: Setting defaultProps as an instance property on Component is not supported ' + + 'Setting defaultProps as an instance property on Component is not supported ' + 'and will be ignored. Instead, define defaultProps as a static property on Component.', ); }); @@ -1199,9 +1199,9 @@ describe('ReactCompositeComponent', () => { }); }).rejects.toThrow(); }).toErrorDev([ - 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + + 'No `render` method found on the RenderTextInvalidConstructor instance: ' + 'did you accidentally return an object from the constructor?', - 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + + 'No `render` method found on the RenderTextInvalidConstructor instance: ' + 'did you accidentally return an object from the constructor?', ]); }); @@ -1239,9 +1239,9 @@ describe('ReactCompositeComponent', () => { }); }).rejects.toThrow(); }).toErrorDev([ - 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + + 'No `render` method found on the RenderTestUndefinedRender instance: ' + 'you may have forgotten to define `render`.', - 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + + 'No `render` method found on the RenderTestUndefinedRender instance: ' + 'you may have forgotten to define `render`.', ]); }); diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js index bd11d1ab6d016..a651a477a8e76 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js @@ -474,7 +474,7 @@ describe('ReactCompositeComponent-state', () => { root.render(); }); }).toErrorDev( - 'Warning: Test.componentWillReceiveProps(): Assigning directly to ' + + 'Test.componentWillReceiveProps(): Assigning directly to ' + "this.state is deprecated (except inside a component's constructor). " + 'Use setState instead.', ); @@ -523,7 +523,7 @@ describe('ReactCompositeComponent-state', () => { root.render(); }); }).toErrorDev( - 'Warning: Test.componentWillMount(): Assigning directly to ' + + 'Test.componentWillMount(): Assigning directly to ' + "this.state is deprecated (except inside a component's constructor). " + 'Use setState instead.', ); @@ -571,7 +571,7 @@ describe('ReactCompositeComponent-state', () => { root.render(); }); }).toErrorDev( - "Warning: Can't perform a React state update on a component that hasn't mounted yet", + "Can't perform a React state update on a component that hasn't mounted yet", ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index 697b65dd60753..c6c90d1cf15f2 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -198,8 +198,8 @@ describe('ReactDOM', () => { ); }).toErrorDev( [ - 'Warning: Expected the last optional `callback` argument to be a function. Instead received: no.', - 'Warning: 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.', + 'Expected the last optional `callback` argument to be a function. Instead received: no.', ], {withoutStack: 2}, ); @@ -215,8 +215,8 @@ describe('ReactDOM', () => { ); }).toErrorDev( [ - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', + "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}, ); @@ -232,8 +232,8 @@ describe('ReactDOM', () => { ); }).toErrorDev( [ - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', + '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}, ); @@ -285,8 +285,8 @@ describe('ReactDOM', () => { ); }).toErrorDev( [ - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', + "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}, ); @@ -303,8 +303,8 @@ describe('ReactDOM', () => { ); }).toErrorDev( [ - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', - 'Expected the last optional `callback` argument to be a function. Instead received: [object Object].', + '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}, ); diff --git a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js index 13fa1cba4993d..9b7d9a30cbd53 100644 --- a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js @@ -110,7 +110,7 @@ describe('ReactDOM unknown attribute', () => { root.render(
); }); }).toErrorDev([ - 'Warning: Received an empty string for a boolean attribute `inert`. ' + + 'Received an empty string for a boolean attribute `inert`. ' + 'This will treat the attribute as if it were false. ' + 'Either pass `false` to silence this warning, or ' + 'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.', @@ -137,7 +137,7 @@ describe('ReactDOM unknown attribute', () => { it('coerces NaN to strings and warns', async () => { await expect(() => testUnknownAttributeAssignment(NaN, 'NaN')).toErrorDev( - 'Warning: Received NaN for the `unknown` attribute. ' + + 'Received NaN for the `unknown` attribute. ' + 'If this is expected, cast the value to a string.\n' + ' in div (at **)', ); @@ -170,14 +170,14 @@ describe('ReactDOM unknown attribute', () => { await expect(() => expect(test).rejects.toThrowError(new TypeError('prod message')), ).toErrorDev( - 'Warning: The provided `unknown` attribute is an unsupported type TemporalLike.' + + 'The provided `unknown` attribute is an unsupported type TemporalLike.' + ' This value must be coerced to a string before using it here.', ); }); it('removes symbols and warns', async () => { await expect(() => testUnknownAttributeRemoval(Symbol('foo'))).toErrorDev( - 'Warning: Invalid value for prop `unknown` on
tag. Either remove it ' + + 'Invalid value for prop `unknown` on
tag. Either remove it ' + 'from the element, or pass a string or number value to keep it ' + 'in the DOM. For details, see https://react.dev/link/attribute-behavior \n' + ' in div (at **)', @@ -188,7 +188,7 @@ describe('ReactDOM unknown attribute', () => { await expect(() => testUnknownAttributeRemoval(function someFunction() {}), ).toErrorDev( - 'Warning: Invalid value for prop `unknown` on
tag. Either remove ' + + 'Invalid value for prop `unknown` on
tag. Either remove ' + 'it from the element, or pass a string or number value to ' + 'keep it in the DOM. For details, see ' + 'https://react.dev/link/attribute-behavior \n' + diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js index 54401f54fe23b..6e02e17ece1a7 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js @@ -194,7 +194,7 @@ describe('ReactDOMComponent', () => { root.render(
{}} />); }); }).toErrorDev( - 'Warning: Invalid value for prop `foo` on
tag. Either remove it ' + + 'Invalid value for prop `foo` on
tag. Either remove it ' + 'from the element, or pass a string or number value to keep ' + 'it in the DOM. For details, see https://react.dev/link/attribute-behavior ' + '\n in div (at **)', @@ -209,7 +209,7 @@ describe('ReactDOMComponent', () => { root.render(
{}} baz={() => {}} />); }); }).toErrorDev( - 'Warning: Invalid values for props `foo`, `baz` on
tag. Either remove ' + + 'Invalid values for props `foo`, `baz` on
tag. Either remove ' + 'them from the element, or pass a string or number value to keep ' + 'them in the DOM. For details, see https://react.dev/link/attribute-behavior ' + '\n in div (at **)', @@ -224,7 +224,7 @@ describe('ReactDOMComponent', () => { root.render(
{}} />); }); }).toErrorDev( - 'Warning: Invalid event handler property `onDblClick`. Did you mean `onDoubleClick`?\n in div (at **)', + 'Invalid event handler property `onDblClick`. Did you mean `onDoubleClick`?\n in div (at **)', ); }); @@ -236,7 +236,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Unknown event handler property `onUnknown`. It will be ignored.\n in div (at **)', + 'Unknown event handler property `onUnknown`. It will be ignored.\n in div (at **)', ); expect(container.firstChild.hasAttribute('onUnknown')).toBe(false); expect(container.firstChild.onUnknown).toBe(undefined); @@ -245,7 +245,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Unknown event handler property `onunknown`. It will be ignored.\n in div (at **)', + 'Unknown event handler property `onunknown`. It will be ignored.\n in div (at **)', ); expect(container.firstChild.hasAttribute('onunknown')).toBe(false); expect(container.firstChild.onunknown).toBe(undefined); @@ -254,7 +254,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Unknown event handler property `on-unknown`. It will be ignored.\n in div (at **)', + 'Unknown event handler property `on-unknown`. It will be ignored.\n in div (at **)', ); expect(container.firstChild.hasAttribute('on-unknown')).toBe(false); expect(container.firstChild['on-unknown']).toBe(undefined); @@ -268,7 +268,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Unknown event handler property `onUnknown`. It will be ignored.\n in div (at **)', + 'Unknown event handler property `onUnknown`. It will be ignored.\n in div (at **)', ); expect(container.firstChild.hasAttribute('onUnknown')).toBe(false); expect(container.firstChild.onUnknown).toBe(undefined); @@ -277,7 +277,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Unknown event handler property `onunknown`. It will be ignored.\n in div (at **)', + 'Unknown event handler property `onunknown`. It will be ignored.\n in div (at **)', ); expect(container.firstChild.hasAttribute('onunknown')).toBe(false); expect(container.firstChild.onunknown).toBe(undefined); @@ -286,7 +286,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Unknown event handler property `on-unknown`. It will be ignored.\n in div (at **)', + 'Unknown event handler property `on-unknown`. It will be ignored.\n in div (at **)', ); expect(container.firstChild.hasAttribute('on-unknown')).toBe(false); expect(container.firstChild['on-unknown']).toBe(undefined); @@ -300,7 +300,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Invalid DOM property `CHILDREN`. Did you mean `children`?\n in div (at **)', + 'Invalid DOM property `CHILDREN`. Did you mean `children`?\n in div (at **)', ); expect(container.firstChild.getAttribute('CHILDREN')).toBe('5'); }); @@ -328,7 +328,7 @@ describe('ReactDOMComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: `NaN` is an invalid value for the `fontSize` css style property.' + + '`NaN` is an invalid value for the `fontSize` css style property.' + '\n in span (at **)', ); await act(() => { @@ -355,7 +355,7 @@ describe('ReactDOMComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: The provided `fontSize` CSS property is an unsupported type TemporalLike.' + + 'The provided `fontSize` CSS property is an unsupported type TemporalLike.' + ' This value must be coerced to a string before using it here.', ); }).rejects.toThrowError(new TypeError('prod message')); @@ -891,8 +891,8 @@ describe('ReactDOMComponent', () => { expect(result2.toLowerCase()).not.toContain('script'); } }).toErrorDev([ - 'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`', - 'Warning: Invalid attribute name: `>
`', + 'Invalid attribute name: `blah" onclick="beevil" noise="hi`', + 'Invalid attribute name: `>
`', ]); }); @@ -915,8 +915,8 @@ describe('ReactDOMComponent', () => { expect(result2.toLowerCase()).not.toContain('script'); } }).toErrorDev([ - 'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`', - 'Warning: Invalid attribute name: `>`', + 'Invalid attribute name: `blah" onclick="beevil" noise="hi`', + 'Invalid attribute name: `>`', ]); }); @@ -953,8 +953,8 @@ describe('ReactDOMComponent', () => { expect(container.firstChild.attributes.length).toBe(0); } }).toErrorDev([ - 'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`', - 'Warning: Invalid attribute name: `>
`', + 'Invalid attribute name: `blah" onclick="beevil" noise="hi`', + 'Invalid attribute name: `>
`', ]); }); @@ -992,8 +992,8 @@ describe('ReactDOMComponent', () => { expect(container.firstChild.attributes.length).toBe(0); } }).toErrorDev([ - 'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`', - 'Warning: Invalid attribute name: `>`', + 'Invalid attribute name: `blah" onclick="beevil" noise="hi`', + 'Invalid attribute name: `>`', ]); }); @@ -1030,8 +1030,8 @@ describe('ReactDOMComponent', () => { expect(container.firstChild.attributes.length).toBe(0); } }).toErrorDev([ - 'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`', - 'Warning: Invalid attribute name: `>
`', + 'Invalid attribute name: `blah" onclick="beevil" noise="hi`', + 'Invalid attribute name: `>
`', ]); }); @@ -1068,8 +1068,8 @@ describe('ReactDOMComponent', () => { expect(container.firstChild.attributes.length).toBe(0); } }).toErrorDev([ - 'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`', - 'Warning: Invalid attribute name: `>`', + 'Invalid attribute name: `blah" onclick="beevil" noise="hi`', + 'Invalid attribute name: `>`', ]); }); @@ -1410,7 +1410,7 @@ describe('ReactDOMComponent', () => { root.render(); }); }).toErrorDev( - ' A component is changing an uncontrolled input to be controlled. This is likely caused by ' + + 'A component is changing an uncontrolled input to be controlled. This is likely caused by ' + 'the value changing from undefined to a defined value, which should not happen. Decide between ' + 'using a controlled or uncontrolled input element for the lifetime of the component.', ); @@ -1866,7 +1866,7 @@ describe('ReactDOMComponent', () => { await expect(async () => { await mountComponent({contentEditable: true, children: ''}); }).toErrorDev( - 'Warning: A component is `contentEditable` and contains `children` ' + + 'A component is `contentEditable` and contains `children` ' + 'managed by React. It is now your responsibility to guarantee that ' + 'none of those nodes are unexpectedly modified or duplicated. This ' + 'is probably not intentional.\n in div (at **)', @@ -2194,7 +2194,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev([ - 'Warning: In HTML, cannot be a child of ' + + 'In HTML, cannot be a child of ' + '
.\n' + 'This will cause a hydration error.' + '\n in tr (at **)' + @@ -2215,7 +2215,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev( - 'Warning: In HTML,

cannot be a descendant ' + + 'In HTML,

cannot be a descendant ' + 'of

.\n' + 'This will cause a hydration error.' + // There is no outer `p` here because root container is not part of the stack. @@ -2249,7 +2249,7 @@ describe('ReactDOMComponent', () => { root.render(); }); }).toErrorDev([ - 'Warning: In HTML, cannot be a child of ' + + 'In HTML, cannot be a child of ' + '. Add a , or to your code to match the DOM tree generated ' + 'by the browser.\n' + 'This will cause a hydration error.' + @@ -2257,14 +2257,14 @@ describe('ReactDOMComponent', () => { '\n in Row (at **)' + '\n in table (at **)' + '\n in Foo (at **)', - 'Warning: In HTML, text nodes cannot be a ' + + 'In HTML, text nodes cannot be a ' + 'child of .\n' + 'This will cause a hydration error.' + '\n in tr (at **)' + '\n in Row (at **)' + '\n in table (at **)' + '\n in Foo (at **)', - 'Warning: In HTML, whitespace text nodes cannot ' + + 'In HTML, whitespace text nodes cannot ' + "be a child of
. Make sure you don't have any extra " + 'whitespace between tags on each line of your source code.\n' + 'This will cause a hydration error.' + @@ -2294,7 +2294,7 @@ describe('ReactDOMComponent', () => { root.render( ); }); }).toErrorDev([ - 'Warning: In HTML, whitespace text nodes cannot ' + + 'In HTML, whitespace text nodes cannot ' + "be a child of
. Make sure you don't have any extra " + 'whitespace between tags on each line of your source code.\n' + 'This will cause a hydration error.' + @@ -2323,7 +2323,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev([ - 'Warning: In HTML, text nodes cannot be a ' + + 'In HTML, text nodes cannot be a ' + 'child of .\n' + 'This will cause a hydration error.' + '\n in tr (at **)' + @@ -2713,7 +2713,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', ); await expect(async () => { const container = document.createElement('div'); @@ -2722,7 +2722,7 @@ describe('ReactDOMComponent', () => { root.render(); }); }).toErrorDev( - 'Warning: Invalid event handler property `onclick`. Did you mean ' + + 'Invalid event handler property `onclick`. Did you mean ' + '`onClick`?\n in input (at **)', ); }); @@ -2731,12 +2731,12 @@ describe('ReactDOMComponent', () => { expect(() => ReactDOMServer.renderToString(
), ).toErrorDev( - 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', ); expect(() => ReactDOMServer.renderToString(), ).toErrorDev( - 'Warning: Invalid event handler property `oninput`. ' + + 'Invalid event handler property `oninput`. ' + // Note: we don't know the right event name so we // use a generic one (onClick) as a suggestion. // This is because we don't bundle the event system @@ -2760,7 +2760,7 @@ describe('ReactDOMComponent', () => { root.render(
); }); }).toErrorDev( - 'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', + 'Invalid DOM property `class`. Did you mean `className`?\n in div (at **)', ); }); @@ -2912,7 +2912,7 @@ describe('ReactDOMComponent', () => { root.render(React.createElement('label', {for: 'test'})); }); }).toErrorDev( - 'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', + 'Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', ); await expect(async () => { @@ -2924,7 +2924,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev( - 'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', + 'Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', ); }); @@ -2934,14 +2934,14 @@ describe('ReactDOMComponent', () => { React.createElement('label', {for: 'test'}), ), ).toErrorDev( - 'Warning: Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', + 'Invalid DOM property `for`. Did you mean `htmlFor`?\n in label', ); expect(() => ReactDOMServer.renderToString( React.createElement('input', {type: 'text', autofocus: true}), ), ).toErrorDev( - 'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', + 'Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n in input', ); }); }); @@ -2989,9 +2989,7 @@ describe('ReactDOMComponent', () => { await act(() => { root.render(
(el = current)} />); }); - }).toErrorDev( - 'Warning: Invalid DOM property `class`. Did you mean `className`?', - ); + }).toErrorDev('Invalid DOM property `class`. Did you mean `className`?'); expect(el.className).toBe('test'); }); @@ -3005,9 +3003,7 @@ describe('ReactDOMComponent', () => { await act(() => { root.render(
(el = current)} />); }); - }).toErrorDev( - 'Warning: Invalid DOM property `cLASS`. Did you mean `className`?', - ); + }).toErrorDev('Invalid DOM property `cLASS`. Did you mean `className`?'); expect(el.className).toBe('test'); }); @@ -3026,7 +3022,7 @@ describe('ReactDOMComponent', () => { ); }); }).toErrorDev( - 'Warning: Invalid DOM property `arabic-form`. Did you mean `arabicForm`?', + 'Invalid DOM property `arabic-form`. Did you mean `arabicForm`?', ); const text = el.querySelector('text'); @@ -3164,7 +3160,7 @@ describe('ReactDOMComponent', () => {
{}} ref={current => (el = current)} />, ); }); - }).toErrorDev('Warning: Invalid value for prop `whatever` on
tag'); + }).toErrorDev('Invalid value for prop `whatever` on
tag'); expect(el.hasAttribute('whatever')).toBe(false); }); @@ -3257,7 +3253,7 @@ describe('ReactDOMComponent', () => { root.render(
(el = current)} />); }); }).toErrorDev( - 'Warning: Received NaN for the `whatever` attribute. If this is ' + + 'Received NaN for the `whatever` attribute. If this is ' + 'expected, cast the value to a string.\n in div', ); @@ -3274,7 +3270,7 @@ describe('ReactDOMComponent', () => { await act(() => { root.render(
{}} />); }); - }).toErrorDev('Warning: Invalid value for prop `whatever` on
tag.'); + }).toErrorDev('Invalid value for prop `whatever` on
tag.'); const el = container.firstChild; expect(el.hasAttribute('whatever')).toBe(false); }); @@ -3288,9 +3284,7 @@ describe('ReactDOMComponent', () => { await act(() => { root.render(
(el = current)} />); }); - }).toErrorDev( - 'Warning: Invalid DOM property `SiZe`. Did you mean `size`?', - ); + }).toErrorDev('Invalid DOM property `SiZe`. Did you mean `size`?'); expect(el.getAttribute('size')).toBe('30'); }); @@ -3502,9 +3496,7 @@ describe('ReactDOMComponent', () => { , ); }); - }).toErrorDev( - 'Warning: Invalid DOM property `x-height`. Did you mean `xHeight`', - ); + }).toErrorDev('Invalid DOM property `x-height`. Did you mean `xHeight`'); expect(el.querySelector('font-face').hasAttribute('x-height')).toBe( false, diff --git a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js index 35e8545072027..e0b2b741dd6c0 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js @@ -196,7 +196,7 @@ describe('ReactDOMComponentTree', () => { simulateInput(inputRef.current, finishValue); }), ).toErrorDev( - 'Warning: A component is changing an uncontrolled input to be controlled. ' + + 'A component is changing an uncontrolled input to be controlled. ' + 'This is likely caused by the value changing from undefined to ' + 'a defined value, which should not happen. ' + 'Decide between using a controlled or uncontrolled input ' + diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index ba7bf62c163ea..79e05e9e0d89c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1810,7 +1810,7 @@ describe('ReactDOMFizzServer', () => { if (__DEV__) { expect(mockError).toHaveBeenCalledWith( - 'Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s', + '<%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s', 'inCorrectTag', '\n' + ' in inCorrectTag (at **)\n' + @@ -1831,7 +1831,7 @@ describe('ReactDOMFizzServer', () => { if (__DEV__) { expect(mockError).toHaveBeenCalledWith( - 'Warning: Each child in a list should have a unique "key" prop.%s%s' + + 'Each child in a list should have a unique "key" prop.%s%s' + ' See https://react.dev/link/warning-keys for more information.%s', gate(flags => flags.enableOwnerStacks) ? // We currently don't track owners in Fizz which is responsible for this frame. @@ -6543,17 +6543,17 @@ describe('ReactDOMFizzServer', () => { if (__DEV__) { expect(mockError.mock.calls.length).toBe(3); expect(mockError.mock.calls[0]).toEqual([ - 'Warning: A script element was rendered with %s. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.%s', + 'A script element was rendered with %s. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.%s', 'a number for children', componentStack(['script', 'body', 'html']), ]); expect(mockError.mock.calls[1]).toEqual([ - 'Warning: A script element was rendered with %s. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.%s', + 'A script element was rendered with %s. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.%s', 'an array for children', componentStack(['script', 'body', 'html']), ]); expect(mockError.mock.calls[2]).toEqual([ - 'Warning: A script element was rendered with %s. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.%s', + 'A script element was rendered with %s. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.%s', 'something unexpected for children', componentStack(['script', 'body', 'html']), ]); diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index e69183ebabe8e..492529f1ae4c7 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -524,7 +524,7 @@ describe('ReactDOMFloat', () => { }).toErrorDev( [ 'Cannot render