;\n }\n }\n- container = document.createElement('div');\n- root = ReactDOMClient.createRoot(container);\n await act(() => {\n root.render();\n });\n@@ -539,23 +566,22 @@ describe('ReactContextValidator', () => {\n }\n \n await expect(async () => {\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).rejects.toThrow(\n- \"Cannot read properties of undefined (reading 'world')\",\n- );\n- }).toErrorDev(\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).rejects.toThrow(\"Cannot read properties of undefined (reading 'world')\");\n+\n+ assertConsoleErrorDev([\n 'Foo defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext(). ' +\n 'However, it is set to undefined. ' +\n 'This can be caused by a typo or by mixing up named and default imports. ' +\n 'This can also happen due to a circular dependency, ' +\n- 'so try moving the createContext() call to a separate file.',\n- );\n+ 'so try moving the createContext() call to a separate file.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('should warn when class contextType is an object', async () => {\n@@ -571,20 +597,19 @@ describe('ReactContextValidator', () => {\n }\n \n await expect(async () => {\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).rejects.toThrow(\n- \"Cannot read properties of undefined (reading 'hello')\",\n- );\n- }).toErrorDev(\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).rejects.toThrow(\"Cannot read properties of undefined (reading 'hello')\");\n+\n+ assertConsoleErrorDev([\n 'Foo defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext(). ' +\n- 'However, it is set to an object with keys {x, y}.',\n- );\n+ 'However, it is set to an object with keys {x, y}.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('should warn when class contextType is a primitive', async () => {\n@@ -596,20 +621,19 @@ describe('ReactContextValidator', () => {\n }\n \n await expect(async () => {\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).rejects.toThrow(\n- \"Cannot read properties of undefined (reading 'world')\",\n- );\n- }).toErrorDev(\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).rejects.toThrow(\"Cannot read properties of undefined (reading 'world')\");\n+\n+ assertConsoleErrorDev([\n 'Foo defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext(). ' +\n- 'However, it is set to a string.',\n- );\n+ 'However, it is set to a string.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('should warn if you define contextType on a function component', async () => {\n@@ -625,31 +649,26 @@ describe('ReactContextValidator', () => {\n }\n ComponentB.contextType = Context;\n \n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'ComponentA: Function components do not support contextType.',\n- );\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n+ 'ComponentA: Function components do not support contextType.\\n' +\n+ ' in ComponentA (at **)',\n+ ]);\n \n \/\/ Warnings should be deduped by component type\n- let container = document.createElement('div');\n- let root = ReactDOMClient.createRoot(container);\n await act(() => {\n root.render();\n });\n \n- await expect(async () => {\n- container = document.createElement('div');\n- root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'ComponentB: Function components do not support contextType.',\n- );\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n+ 'ComponentB: Function components do not support contextType.\\n' +\n+ ' in ComponentB (at **)',\n+ ]);\n });\n });\ndiff --git a\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js b\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js\nindex 392f89979e..44952536ac 100644\n--- a\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactCreateElement-test.js\n@@ -13,6 +13,8 @@ let act;\n \n let React;\n let ReactDOMClient;\n+let assertConsoleErrorDev;\n+let assertConsoleWarnDev;\n \n \/\/ NOTE: This module tests the old, \"classic\" JSX runtime, React.createElement.\n \/\/ Do not use JSX syntax in this module; call React.createElement directly.\n@@ -22,7 +24,11 @@ describe('ReactCreateElement', () => {\n beforeEach(() => {\n jest.resetModules();\n \n- act = require('internal-test-utils').act;\n+ ({\n+ act,\n+ assertConsoleErrorDev,\n+ assertConsoleWarnDev,\n+ } = require('internal-test-utils'));\n \n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n@@ -63,25 +69,34 @@ describe('ReactCreateElement', () => {\n }\n }\n const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await expect(async () => {\n- await act(() => {\n- root.render(React.createElement(Parent));\n- });\n- }).toErrorDev(\n+ await act(() => {\n+ root.render(React.createElement(Parent));\n+ });\n+ assertConsoleErrorDev([\n 'Child: `key` is not a prop. Trying to access it will result ' +\n 'in `undefined` being returned. If you need to access the same ' +\n 'value within the child component, you should pass it as a different ' +\n- 'prop. (https:\/\/react.dev\/link\/special-props)',\n- );\n+ 'prop. (https:\/\/react.dev\/link\/special-props)\\n' +\n+ (gate(flags => flags.enableOwnerStacks)\n+ ? [' in Parent (at **)']\n+ : [\n+ ' in Child (at **)\\n' +\n+ ' in div (at **)\\n' +\n+ ' in Parent (at **)',\n+ ]),\n+ ]);\n });\n \n it('should warn when `key` is being accessed on a host element', () => {\n const element = React.createElement('div', {key: '3'});\n- expect(() => void element.props.key).toErrorDev(\n- 'div: `key` is not a prop. Trying to access it will result ' +\n- 'in `undefined` being returned. If you need to access the same ' +\n- 'value within the child component, you should pass it as a different ' +\n- 'prop. (https:\/\/react.dev\/link\/special-props)',\n+ void element.props.key;\n+ assertConsoleErrorDev(\n+ [\n+ 'div: `key` is not a prop. Trying to access it will result ' +\n+ 'in `undefined` being returned. If you need to access the same ' +\n+ 'value within the child component, you should pass it as a different ' +\n+ 'prop. (https:\/\/react.dev\/link\/special-props)',\n+ ],\n {withoutStack: true},\n );\n });\n@@ -141,9 +156,16 @@ describe('ReactCreateElement', () => {\n foo: '56',\n });\n expect(element.type).toBe(ComponentClass);\n- expect(() => expect(element.ref).toBe(ref)).toErrorDev(\n- 'Accessing element.ref was removed in React 19',\n- {withoutStack: true},\n+ expect(element.ref).toBe(ref);\n+ assertConsoleErrorDev(\n+ [\n+ 'Accessing element.ref was removed in React 19. ref is now a ' +\n+ 'regular prop. It will be removed from the JSX Element ' +\n+ 'type in a future release.',\n+ ],\n+ {\n+ withoutStack: true,\n+ },\n );\n const expectation = {foo: '56', ref};\n Object.freeze(expectation);\n@@ -412,11 +434,13 @@ describe('ReactCreateElement', () => {\n \n it('warns if outdated JSX transform is detected', async () => {\n \/\/ Warns if __self is detected, because that's only passed by a compiler\n- expect(() => {\n- React.createElement('div', {className: 'foo', __self: this});\n- }).toWarnDev(\n- 'Your app (or one of its dependencies) is using an outdated ' +\n- 'JSX transform.',\n+ React.createElement('div', {className: 'foo', __self: this});\n+ assertConsoleWarnDev(\n+ [\n+ 'Your app (or one of its dependencies) is using an outdated JSX ' +\n+ 'transform. Update to the modern JSX transform for ' +\n+ 'faster performance: https:\/\/react.dev\/link\/new-jsx-transform',\n+ ],\n {\n withoutStack: true,\n },\ndiff --git a\/packages\/react\/src\/__tests__\/ReactCreateRef-test.js b\/packages\/react\/src\/__tests__\/ReactCreateRef-test.js\nindex 616c62e00c..bf7166d8cf 100644\n--- a\/packages\/react\/src\/__tests__\/ReactCreateRef-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactCreateRef-test.js\n@@ -12,6 +12,7 @@\n let React;\n let ReactDOM;\n let ReactDOMClient;\n+let assertConsoleErrorDev;\n \n describe('ReactCreateRef', () => {\n beforeEach(() => {\n@@ -20,6 +21,7 @@ describe('ReactCreateRef', () => {\n React = require('react');\n ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n+ ({assertConsoleErrorDev} = require('internal-test-utils'));\n });\n \n it('should warn in dev if an invalid ref object is provided', () => {\n@@ -34,38 +36,36 @@ describe('ReactCreateRef', () => {\n }\n \n const root = ReactDOMClient.createRoot(document.createElement('div'));\n- expect(() =>\n- ReactDOM.flushSync(() => {\n- root.render(\n- \n-

\n- <\/Wrapper>,\n- );\n- }),\n- ).toErrorDev(\n+ ReactDOM.flushSync(() => {\n+ root.render(\n+ \n+

\n+ <\/Wrapper>,\n+ );\n+ });\n+ assertConsoleErrorDev([\n 'Unexpected ref object provided for div. ' +\n 'Use either a ref-setter function or React.createRef().\\n' +\n ' in div (at **)' +\n (gate(flags => flags.enableOwnerStacks)\n ? ''\n : '\\n in Wrapper (at **)'),\n- );\n+ ]);\n \n- expect(() =>\n- ReactDOM.flushSync(() => {\n- root.render(\n- \n- \n- <\/Wrapper>,\n- );\n- }),\n- ).toErrorDev(\n+ ReactDOM.flushSync(() => {\n+ root.render(\n+ \n+ \n+ <\/Wrapper>,\n+ );\n+ });\n+ assertConsoleErrorDev([\n 'Unexpected ref object provided for ExampleComponent. ' +\n 'Use either a ref-setter function or React.createRef().\\n' +\n ' in ExampleComponent (at **)' +\n (gate(flags => flags.enableOwnerStacks)\n ? ''\n : '\\n in Wrapper (at **)'),\n- );\n+ ]);\n });\n });\ndiff --git a\/packages\/react\/src\/__tests__\/ReactES6Class-test.js b\/packages\/react\/src\/__tests__\/ReactES6Class-test.js\nindex eceeab18c5..640ae7ef37 100644\n--- a\/packages\/react\/src\/__tests__\/ReactES6Class-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactES6Class-test.js\n@@ -14,6 +14,7 @@ let React;\n let ReactDOM;\n let ReactDOMClient;\n let assertConsoleErrorDev;\n+let assertConsoleWarnDev;\n \n describe('ReactES6Class', () => {\n let container;\n@@ -31,7 +32,10 @@ describe('ReactES6Class', () => {\n React = require('react');\n ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n- ({assertConsoleErrorDev} = require('internal-test-utils'));\n+ ({\n+ assertConsoleErrorDev,\n+ assertConsoleWarnDev,\n+ } = require('internal-test-utils'));\n container = document.createElement('div');\n root = ReactDOMClient.createRoot(container);\n attachedListener = null;\n@@ -69,14 +73,15 @@ describe('ReactES6Class', () => {\n }\n window.addEventListener('error', errorHandler);\n try {\n- expect(() => {\n- ReactDOM.flushSync(() => root.render());\n- }).toErrorDev([\n+ ReactDOM.flushSync(() => root.render());\n+ assertConsoleErrorDev([\n \/\/ A failed component renders twice in DEV in concurrent mode\n 'No `render` method found on the Foo instance: ' +\n- 'you may have forgotten to define `render`.',\n+ 'you may have forgotten to define `render`.\\n' +\n+ ' in Foo (at **)',\n 'No `render` method found on the Foo instance: ' +\n- 'you may have forgotten to define `render`.',\n+ 'you may have forgotten to define `render`.\\n' +\n+ ' in Foo (at **)',\n ]);\n } finally {\n window.removeEventListener('error', errorHandler);\n@@ -158,12 +163,12 @@ describe('ReactES6Class', () => {\n return

;\n }\n }\n- expect(() => {\n- ReactDOM.flushSync(() => root.render());\n- }).toErrorDev(\n+ ReactDOM.flushSync(() => root.render());\n+ assertConsoleErrorDev([\n 'Foo: getDerivedStateFromProps() is defined as an instance method ' +\n- 'and will be ignored. Instead, declare it as a static method.',\n- );\n+ 'and will be ignored. Instead, declare it as a static method.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('warns if getDerivedStateFromError is not static', () => {\n@@ -175,12 +180,12 @@ describe('ReactES6Class', () => {\n return

;\n }\n }\n- expect(() => {\n- ReactDOM.flushSync(() => root.render());\n- }).toErrorDev(\n+ ReactDOM.flushSync(() => root.render());\n+ assertConsoleErrorDev([\n 'Foo: getDerivedStateFromError() is defined as an instance method ' +\n- 'and will be ignored. Instead, declare it as a static method.',\n- );\n+ 'and will be ignored. Instead, declare it as a static method.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('warns if getSnapshotBeforeUpdate is static', () => {\n@@ -190,12 +195,12 @@ describe('ReactES6Class', () => {\n return

;\n }\n }\n- expect(() => {\n- ReactDOM.flushSync(() => root.render());\n- }).toErrorDev(\n+ ReactDOM.flushSync(() => root.render());\n+ assertConsoleErrorDev([\n 'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +\n- 'and will be ignored. Instead, declare it as an instance method.',\n- );\n+ 'and will be ignored. Instead, declare it as an instance method.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('warns if state not initialized before static getDerivedStateFromProps', () => {\n@@ -210,14 +215,14 @@ describe('ReactES6Class', () => {\n return

;\n }\n }\n- expect(() => {\n- ReactDOM.flushSync(() => root.render());\n- }).toErrorDev(\n+ ReactDOM.flushSync(() => root.render());\n+ assertConsoleErrorDev([\n '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +\n 'undefined. This is not recommended. Instead, define the initial state by ' +\n 'assigning an object to `this.state` in the constructor of `Foo`. ' +\n- 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',\n- );\n+ 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('updates initial state with values returned by static getDerivedStateFromProps', () => {\n@@ -266,11 +271,13 @@ describe('ReactES6Class', () => {\n super(props, context);\n this.state = {tag: context.tag, className: this.context.className};\n }\n+\n render() {\n const Tag = this.state.tag;\n return ;\n }\n }\n+\n Foo.contextTypes = {\n tag: PropTypes.string,\n className: PropTypes.string,\n@@ -280,10 +287,12 @@ describe('ReactES6Class', () => {\n getChildContext() {\n return {tag: 'span', className: 'foo'};\n }\n+\n render() {\n return ;\n }\n }\n+\n Outer.childContextTypes = {\n tag: PropTypes.string,\n className: PropTypes.string,\n@@ -291,8 +300,15 @@ describe('ReactES6Class', () => {\n runTest(, 'SPAN', 'foo');\n \n assertConsoleErrorDev([\n- 'Outer uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',\n- 'Foo uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',\n+ 'Outer uses the legacy childContextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ ' in Outer (at **)',\n+ 'Foo uses the legacy contextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() with static contextType instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ (gate(flags => flags.enableOwnerStacks)\n+ ? ''\n+ : ' in Foo (at **)\\n') +\n+ ' in Outer (at **)',\n ]);\n });\n }\n@@ -327,9 +343,10 @@ describe('ReactES6Class', () => {\n return ;\n }\n }\n- expect(() => runTest(, 'SPAN', '')).toErrorDev(\n- 'Foo.state: must be set to an object or null',\n- );\n+ runTest(, 'SPAN', '');\n+ assertConsoleErrorDev([\n+ 'Foo.state: must be set to an object or null\\n in Foo (at **)',\n+ ]);\n });\n });\n \n@@ -480,11 +497,22 @@ describe('ReactES6Class', () => {\n }\n }\n \n- expect(() => runTest(, 'SPAN', 'foo')).toErrorDev([\n- 'getInitialState was defined on Foo, a plain JavaScript class.',\n- 'getDefaultProps was defined on Foo, a plain JavaScript class.',\n- 'contextType was defined as an instance property on Foo.',\n- 'contextTypes was defined as an instance property on Foo.',\n+ runTest(, 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n+ 'getInitialState was defined on Foo, a plain JavaScript class. ' +\n+ 'This is only supported for classes created using React.createClass. ' +\n+ 'Did you mean to define a state property instead?\\n' +\n+ ' in Foo (at **)',\n+ 'getDefaultProps was defined on Foo, a plain JavaScript class. ' +\n+ 'This is only supported for classes created using React.createClass. ' +\n+ 'Use a static property to define defaultProps instead.\\n' +\n+ ' in Foo (at **)',\n+ 'contextType was defined as an instance property on Foo. ' +\n+ 'Use a static property to define contextType instead.\\n' +\n+ ' in Foo (at **)',\n+ 'contextTypes was defined as an instance property on Foo. ' +\n+ 'Use a static property to define contextTypes instead.\\n' +\n+ ' in Foo (at **)',\n ]);\n expect(getInitialStateWasCalled).toBe(false);\n expect(getDefaultPropsWasCalled).toBe(false);\n@@ -514,11 +542,13 @@ describe('ReactES6Class', () => {\n }\n }\n \n- expect(() => runTest(, 'SPAN', 'foo')).toErrorDev(\n+ runTest(, 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n 'NamedComponent has a method called componentShouldUpdate(). Did you ' +\n 'mean shouldComponentUpdate()? The name is phrased as a question ' +\n- 'because the function is expected to return a value.',\n- );\n+ 'because the function is expected to return a value.\\n' +\n+ ' in NamedComponent (at **)',\n+ ]);\n });\n \n it('should warn when misspelling componentWillReceiveProps', () => {\n@@ -531,10 +561,12 @@ describe('ReactES6Class', () => {\n }\n }\n \n- expect(() => runTest(, 'SPAN', 'foo')).toErrorDev(\n+ runTest(, 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n 'NamedComponent has a method called componentWillRecieveProps(). Did ' +\n- 'you mean componentWillReceiveProps()?',\n- );\n+ 'you mean componentWillReceiveProps()?\\n' +\n+ ' in NamedComponent (at **)',\n+ ]);\n });\n \n it('should warn when misspelling UNSAFE_componentWillReceiveProps', () => {\n@@ -547,23 +579,33 @@ describe('ReactES6Class', () => {\n }\n }\n \n- expect(() => runTest(, 'SPAN', 'foo')).toErrorDev(\n+ runTest(, 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n 'NamedComponent has a method called UNSAFE_componentWillRecieveProps(). ' +\n- 'Did you mean UNSAFE_componentWillReceiveProps()?',\n- );\n+ 'Did you mean UNSAFE_componentWillReceiveProps()?\\n' +\n+ ' in NamedComponent (at **)',\n+ ]);\n });\n \n it('should throw AND warn when trying to access classic APIs', () => {\n const ref = React.createRef();\n runTest(, 'DIV', 'foo');\n- expect(() =>\n- expect(() => ref.current.replaceState({})).toThrow(),\n- ).toWarnDev(\n- 'replaceState(...) is deprecated in plain JavaScript React classes',\n+\n+ expect(() => ref.current.replaceState({})).toThrow();\n+ assertConsoleWarnDev(\n+ [\n+ 'replaceState(...) is deprecated in plain JavaScript React classes. ' +\n+ 'Refactor your code to use setState instead (see https:\/\/github.com\/facebook\/react\/issues\/3236).',\n+ ],\n {withoutStack: true},\n );\n- expect(() => expect(() => ref.current.isMounted()).toThrow()).toWarnDev(\n- 'isMounted(...) is deprecated in plain JavaScript React classes',\n+ expect(() => ref.current.isMounted()).toThrow();\n+ assertConsoleWarnDev(\n+ [\n+ 'isMounted(...) is deprecated in plain JavaScript React classes. ' +\n+ 'Instead, make sure to clean up subscriptions and pending requests in ' +\n+ 'componentWillUnmount to prevent memory leaks.',\n+ ],\n {withoutStack: true},\n );\n });\n@@ -575,20 +617,31 @@ describe('ReactES6Class', () => {\n return

;\n }\n }\n+\n Bar.contextTypes = {bar: PropTypes.string};\n+\n class Foo extends React.Component {\n getChildContext() {\n return {bar: 'bar-through-context'};\n }\n+\n render() {\n return ;\n }\n }\n+\n Foo.childContextTypes = {bar: PropTypes.string};\n runTest(, 'DIV', 'bar-through-context');\n assertConsoleErrorDev([\n- 'Foo uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',\n- 'Bar uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',\n+ 'Foo uses the legacy childContextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ ' in Foo (at **)',\n+ 'Bar uses the legacy contextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() with static contextType instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ (gate(flags => flags.enableOwnerStacks)\n+ ? ''\n+ : ' in Bar (at **)\\n') +\n+ ' in Foo (at **)',\n ]);\n });\n }\ndiff --git a\/packages\/react\/src\/__tests__\/ReactElementClone-test.js b\/packages\/react\/src\/__tests__\/ReactElementClone-test.js\nindex fb0bfe2df8..b2e791f826 100644\n--- a\/packages\/react\/src\/__tests__\/ReactElementClone-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactElementClone-test.js\n@@ -12,6 +12,7 @@\n let act;\n let React;\n let ReactDOMClient;\n+let assertConsoleErrorDev;\n \n describe('ReactElementClone', () => {\n let ComponentClass;\n@@ -19,7 +20,7 @@ describe('ReactElementClone', () => {\n beforeEach(() => {\n jest.resetModules();\n \n- act = require('internal-test-utils').act;\n+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n \n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n@@ -314,11 +315,14 @@ describe('ReactElementClone', () => {\n \n it('warns for keys for arrays of elements in rest args', async () => {\n const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await expect(async () => {\n- await act(() => {\n- root.render(React.cloneElement(

, null, [

]));\n- });\n- }).toErrorDev('Each child in a list should have a unique \"key\" prop.');\n+ await act(() => {\n+ root.render(React.cloneElement(

, null, [

]));\n+ });\n+ assertConsoleErrorDev([\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the top-level render call using

. See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in div (at **)',\n+ ]);\n });\n \n it('does not warns for arrays of elements with keys', async () => {\n@@ -363,9 +367,16 @@ describe('ReactElementClone', () => {\n expect(clone.type).toBe(ComponentClass);\n expect(clone.key).toBe('12');\n expect(clone.props.ref).toBe('34');\n- expect(() => expect(clone.ref).toBe('34')).toErrorDev(\n- 'Accessing element.ref was removed in React 19',\n- {withoutStack: true},\n+ expect(clone.ref).toBe('34');\n+ assertConsoleErrorDev(\n+ [\n+ 'Accessing element.ref was removed in React 19. ref is now a ' +\n+ 'regular prop. It will be removed from the JSX Element ' +\n+ 'type in a future release.',\n+ ],\n+ {\n+ withoutStack: true,\n+ },\n );\n expect(clone.props).toEqual({foo: 'ef', ref: '34'});\n if (__DEV__) {\ndiff --git a\/packages\/react\/src\/__tests__\/ReactElementValidator-test.internal.js b\/packages\/react\/src\/__tests__\/ReactElementValidator-test.internal.js\nindex 4383a6472d..1191aa7ec2 100644\n--- a\/packages\/react\/src\/__tests__\/ReactElementValidator-test.internal.js\n+++ b\/packages\/react\/src\/__tests__\/ReactElementValidator-test.internal.js\n@@ -18,6 +18,7 @@\n let React;\n let ReactDOMClient;\n let act;\n+let assertConsoleErrorDev;\n \n describe('ReactElementValidator', () => {\n let ComponentClass;\n@@ -27,7 +28,7 @@ describe('ReactElementValidator', () => {\n \n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n- act = require('internal-test-utils').act;\n+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n ComponentClass = class extends React.Component {\n render() {\n return React.createElement('div', null, this.props.children);\n@@ -37,16 +38,27 @@ describe('ReactElementValidator', () => {\n \n it('warns for keys for arrays of elements in rest args', async () => {\n const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await expect(async () => {\n- await act(() =>\n- root.render(\n- React.createElement(ComponentClass, null, [\n- React.createElement(ComponentClass),\n- React.createElement(ComponentClass),\n- ]),\n- ),\n- );\n- }).toErrorDev('Each child in a list should have a unique \"key\" prop.');\n+ await act(() =>\n+ root.render(\n+ React.createElement(ComponentClass, null, [\n+ React.createElement(ComponentClass),\n+ React.createElement(ComponentClass),\n+ ]),\n+ ),\n+ );\n+ assertConsoleErrorDev(\n+ gate(flags => flags.enableOwnerStacks)\n+ ? [\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `ComponentClass`. See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in ComponentClass (at **)',\n+ ]\n+ : [\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the top-level render call using . See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in ComponentClass (at **)',\n+ ],\n+ );\n });\n \n it('warns for keys for arrays of elements with owner info', async () => {\n@@ -67,18 +79,23 @@ describe('ReactElementValidator', () => {\n }\n }\n \n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => root.render(React.createElement(ComponentWrapper)));\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => root.render(React.createElement(ComponentWrapper)));\n+ assertConsoleErrorDev([\n 'Each child in a list should have a unique \"key\" prop.' +\n '\\n\\nCheck the render method of `' +\n (gate(flags => flags.enableOwnerStacks)\n ? 'ComponentClass'\n : 'InnerClass') +\n '`. ' +\n- 'It was passed a child from ComponentWrapper. ',\n- );\n+ 'It was passed a child from ComponentWrapper. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ (gate(flags => flags.enableOwnerStacks)\n+ ? ' in ComponentWrapper (at **)'\n+ : ' in ComponentClass (at **)\\n' +\n+ ' in InnerClass (at **)\\n' +\n+ ' in ComponentWrapper (at **)'),\n+ ]);\n });\n \n it('warns for keys for arrays with no owner or parent info', async () => {\n@@ -89,36 +106,35 @@ describe('ReactElementValidator', () => {\n \n const divs = [

];\n \n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => root.render({divs}<\/Anonymous>));\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => root.render({divs}<\/Anonymous>));\n+ assertConsoleErrorDev([\n gate(flags => flags.enableOwnerStacks)\n ? \/\/ For owner stacks the parent being validated is the div.\n 'Each child in a list should have a unique ' +\n- '\"key\" prop.' +\n- '\\n\\nCheck the top-level render call using

. ' +\n- 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n- ' in div (at **)'\n+ '\"key\" prop.' +\n+ '\\n\\nCheck the top-level render call using

. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in div (at **)'\n : 'Each child in a list should have a unique ' +\n- '\"key\" prop. See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n- ' in div (at **)',\n- );\n+ '\"key\" prop. See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in div (at **)',\n+ ]);\n });\n \n it('warns for keys for arrays of elements with no owner info', async () => {\n const divs = [

];\n \n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n \n- await act(() => root.render(

{divs}<\/div>));\n- }).toErrorDev(\n+ await act(() => root.render(

{divs}<\/div>));\n+ assertConsoleErrorDev([\n 'Each child in a list should have a unique ' +\n- '\"key\" prop.\\n\\nCheck the top-level render call using

. See ' +\n- 'https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ '\"key\" prop.' +\n+ '\\n\\nCheck the top-level render call using

. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n ' in div (at **)',\n- );\n+ ]);\n });\n \n it('warns for keys with component stack info', async () => {\n@@ -134,10 +150,9 @@ describe('ReactElementValidator', () => {\n return } \/>;\n }\n \n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => root.render());\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => root.render());\n+ assertConsoleErrorDev([\n 'Each child in a list should have a unique ' +\n '\"key\" prop.\\n\\nCheck the render method of `Component`. See ' +\n 'https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n@@ -147,7 +162,7 @@ describe('ReactElementValidator', () => {\n ? ''\n : ' in Parent (at **)\\n') +\n ' in GrandParent (at **)',\n- );\n+ ]);\n });\n \n it('does not warn for keys when passing children down', async () => {\n@@ -187,21 +202,37 @@ describe('ReactElementValidator', () => {\n },\n };\n \n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() =>\n- root.render(React.createElement(ComponentClass, null, iterable)),\n- );\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() =>\n+ root.render(React.createElement(ComponentClass, null, iterable)),\n+ );\n+ assertConsoleErrorDev(\n gate(flag => flag.enableOwnerStacks)\n- ? 'Each child in a list should have a unique \"key\" prop.'\n+ ? [\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `ComponentClass`. It was passed a child from div. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in ComponentClass (at **)',\n+ ]\n : \/\/ Since each pass generates a new element, it doesn't get marked as\n \/\/ validated and it gets rechecked each time.\n-\n [\n- 'Each child in a list should have a unique \"key\" prop.',\n- 'Each child in a list should have a unique \"key\" prop.',\n- 'Each child in a list should have a unique \"key\" prop.',\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the top-level render call using . ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in ComponentClass (at **)',\n+\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `ComponentClass`. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in ComponentClass (at **)\\n' +\n+ ' in ComponentClass (at **)',\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `ComponentClass`. It was passed a child from div. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in ComponentClass (at **)\\n' +\n+ ' in div (at **)\\n' +\n+ ' in ComponentClass (at **)',\n ],\n );\n });\n@@ -254,86 +285,102 @@ describe('ReactElementValidator', () => {\n function ParentComp() {\n return React.createElement(MyComp);\n }\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => root.render(React.createElement(ParentComp)));\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => root.render(React.createElement(ParentComp)));\n+ assertConsoleErrorDev([\n 'Each child in a list should have a unique \"key\" prop.' +\n '\\n\\nCheck the render method of `ParentComp`. It was passed a child from MyComp. ' +\n 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n ' in div (at **)\\n' +\n ' in MyComp (at **)\\n' +\n ' in ParentComp (at **)',\n- );\n+ ]);\n });\n \n it('gives a helpful error when passing invalid types', async () => {\n function Foo() {}\n const errors = [];\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'), {\n- onUncaughtError(error) {\n- errors.push(error.message);\n- },\n- });\n- const cases = [\n- React.createElement(undefined),\n- React.createElement(null),\n- React.createElement(true),\n- React.createElement({x: 17}),\n- React.createElement({}),\n- React.createElement(React.createElement('div')),\n- React.createElement(React.createElement(Foo)),\n- React.createElement(\n- React.createElement(React.createContext().Consumer),\n- ),\n- React.createElement({$$typeof: 'non-react-thing'}),\n- ];\n- for (let i = 0; i < cases.length; i++) {\n- await act(() => root.render(cases[i]));\n- }\n- }).toErrorDev(\n- gate(flag => flag.enableOwnerStacks)\n- ? \/\/ We don't need these extra warnings because we already have the errors.\n- []\n- : [\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: undefined. You likely forgot to export your ' +\n- \"component from the file it's defined in, or you might have mixed up \" +\n- 'default and named imports.',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: null.',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: boolean.',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: object.',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: object. You likely forgot to export your ' +\n- \"component from the file it's defined in, or you might have mixed up \" +\n- 'default and named imports.',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got:

. Did you accidentally export a JSX literal ' +\n- 'instead of a component?',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: . Did you accidentally export a JSX literal ' +\n- 'instead of a component?',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: . Did you accidentally ' +\n- 'export a JSX literal instead of a component?',\n- 'React.createElement: type is invalid -- expected a string ' +\n- '(for built-in components) or a class\/function (for composite ' +\n- 'components) but got: object.',\n- ],\n- {withoutStack: true},\n- );\n+ const root = ReactDOMClient.createRoot(document.createElement('div'), {\n+ onUncaughtError(error) {\n+ errors.push(error.message);\n+ },\n+ });\n+ const cases = [\n+ [\n+ () => React.createElement(undefined),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: undefined. You likely forgot to export your ' +\n+ \"component from the file it's defined in, or you might have mixed up \" +\n+ 'default and named imports.',\n+ ],\n+ [\n+ () => React.createElement(null),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: null.',\n+ ],\n+ [\n+ () => React.createElement(true),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: boolean.',\n+ ],\n+ [\n+ () => React.createElement({x: 17}),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: object.',\n+ ],\n+ [\n+ () => React.createElement({}),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: object. You likely forgot to export your ' +\n+ \"component from the file it's defined in, or you might have mixed up \" +\n+ 'default and named imports.',\n+ ],\n+ [\n+ () => React.createElement(React.createElement('div')),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got:

. Did you accidentally export a JSX literal ' +\n+ 'instead of a component?',\n+ ],\n+ [\n+ () => React.createElement(React.createElement(Foo)),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: . Did you accidentally export a JSX literal ' +\n+ 'instead of a component?',\n+ ],\n+ [\n+ () =>\n+ React.createElement(\n+ React.createElement(React.createContext().Consumer),\n+ ),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: . Did you accidentally ' +\n+ 'export a JSX literal instead of a component?',\n+ ],\n+ [\n+ () => React.createElement({$$typeof: 'non-react-thing'}),\n+ 'React.createElement: type is invalid -- expected a string ' +\n+ '(for built-in components) or a class\/function (for composite ' +\n+ 'components) but got: object.',\n+ ],\n+ ];\n+ for (let i = 0; i < cases.length; i++) {\n+ await act(async () => root.render(cases[i][0]()));\n+ assertConsoleErrorDev(\n+ gate(flag => flag.enableOwnerStacks)\n+ ? \/\/ We don't need these extra warnings because we already have the errors.\n+ []\n+ : [cases[i][1]],\n+ {withoutStack: true},\n+ );\n+ }\n \n expect(errors).toEqual(\n __DEV__\n@@ -414,15 +461,14 @@ describe('ReactElementValidator', () => {\n }\n \n await expect(async () => {\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => root.render(React.createElement(ParentComp)));\n- }).rejects.toThrowError(\n- 'Element type is invalid: expected a string (for built-in components) ' +\n- 'or a class\/function (for composite components) but got: null.' +\n- (__DEV__ ? '\\n\\nCheck the render method of `ParentComp`.' : ''),\n- );\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => root.render(React.createElement(ParentComp)));\n+ }).rejects.toThrowError(\n+ 'Element type is invalid: expected a string (for built-in components) ' +\n+ 'or a class\/function (for composite components) but got: null.' +\n+ (__DEV__ ? '\\n\\nCheck the render method of `ParentComp`.' : ''),\n+ );\n+ assertConsoleErrorDev(\n gate(flag => flag.enableOwnerStacks)\n ? \/\/ We don't need these extra warnings because we already have the errors.\n []\n@@ -446,13 +492,13 @@ describe('ReactElementValidator', () => {\n }\n }\n \n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => root.render(React.createElement(Foo)));\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => root.render(React.createElement(Foo)));\n+ assertConsoleErrorDev([\n 'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +\n- 'can only have `key` and `children` props.',\n- );\n+ 'can only have `key` and `children` props.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('does not warn when using DOM node as children', async () => {\n@@ -512,9 +558,8 @@ describe('ReactElementValidator', () => {\n \n it('does not blow up on key warning with undefined type', () => {\n const Foo = undefined;\n- expect(() => {\n- void ({[

]}<\/Foo>);\n- }).toErrorDev(\n+ void ({[

]}<\/Foo>);\n+ assertConsoleErrorDev(\n gate(flags => flags.enableOwnerStacks)\n ? []\n : [\ndiff --git a\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js b\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\nindex 12e54e5c96..d4e78f1b1c 100644\n--- a\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactJSXElementValidator-test.js\n@@ -14,6 +14,7 @@\n let act;\n let React;\n let ReactDOMClient;\n+let assertConsoleErrorDev;\n \n describe('ReactJSXElementValidator', () => {\n let Component;\n@@ -22,7 +23,7 @@ describe('ReactJSXElementValidator', () => {\n beforeEach(() => {\n jest.resetModules();\n \n- act = require('internal-test-utils').act;\n+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n \n@@ -41,14 +42,21 @@ describe('ReactJSXElementValidator', () => {\n });\n \n it('warns for keys for arrays of elements in children position', async () => {\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n-\n- await act(() => {\n- root.render({[, ]}<\/Component>);\n- });\n- }).toErrorDev('Each child in a list should have a unique \"key\" prop.');\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render({[, ]}<\/Component>);\n+ });\n+ assertConsoleErrorDev([\n+ gate(flags => flags.enableOwnerStacks)\n+ ? 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `Component`. See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in Component (at **)'\n+ : 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the top-level render call using . See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in Component (at **)',\n+ ]);\n });\n \n it('warns for keys for arrays of elements with owner info', async () => {\n@@ -64,20 +72,24 @@ describe('ReactJSXElementValidator', () => {\n }\n }\n \n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev([\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n 'Each child in a list should have a unique \"key\" prop.' +\n '\\n\\nCheck the render method of `' +\n (gate(flag => flag.enableOwnerStacks)\n ? 'Component'\n : 'InnerComponent') +\n '`. ' +\n- 'It was passed a child from ComponentWrapper. ',\n+ 'It was passed a child from ComponentWrapper. See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ (gate(flag => flag.enableOwnerStacks)\n+ ? ' in ComponentWrapper (at **)'\n+ : ' in Component (at **)\\n' +\n+ ' in InnerComponent (at **)\\n' +\n+ ' in ComponentWrapper (at **)'),\n ]);\n });\n \n@@ -94,22 +106,38 @@ describe('ReactJSXElementValidator', () => {\n },\n };\n \n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n- await act(() => {\n- root.render({iterable}<\/Component>);\n- });\n- }).toErrorDev(\n+ await act(() => {\n+ root.render({iterable}<\/Component>);\n+ });\n+ assertConsoleErrorDev(\n gate(flag => flag.enableOwnerStacks)\n- ? ['Each child in a list should have a unique \"key\" prop.']\n+ ? [\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `Component`. It was passed a child from div. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in Component (at **)',\n+ ]\n : \/\/ Since each pass generates a new element, it doesn't get marked as\n \/\/ validated and it gets rechecked each time.\n [\n- 'Each child in a list should have a unique \"key\" prop.',\n- 'Each child in a list should have a unique \"key\" prop.',\n- 'Each child in a list should have a unique \"key\" prop.',\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the top-level render call using . ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in Component (at **)',\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `Component`. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in Component (at **)\\n' +\n+ ' in Component (at **)',\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `Component`. It was passed a child from div. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in Component (at **)\\n' +\n+ ' in div (at **)\\n' +\n+ ' in Component (at **)',\n ],\n );\n });\n@@ -198,21 +226,20 @@ describe('ReactJSXElementValidator', () => {\n return ;\n }\n }\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n-\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n 'Each child in a list should have a unique \"key\" prop.' +\n '\\n\\nCheck the render method of `ParentComp`. It was passed a child from MyComp. ' +\n 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n ' in div (at **)\\n' +\n ' in MyComp (at **)\\n' +\n ' in ParentComp (at **)',\n- );\n+ ]);\n });\n \n it('warns for fragments with illegal attributes', async () => {\n@@ -222,16 +249,16 @@ describe('ReactJSXElementValidator', () => {\n }\n }\n \n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n 'Invalid prop `a` supplied to `React.Fragment`. React.Fragment ' +\n- 'can only have `key` and `children` props.',\n- );\n+ 'can only have `key` and `children` props.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('warns for fragments with refs', async () => {\n@@ -248,13 +275,16 @@ describe('ReactJSXElementValidator', () => {\n }\n }\n \n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev('Invalid prop `ref` supplied to `React.Fragment`.');\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n+ 'Invalid prop `ref` supplied to `React.Fragment`.' +\n+ ' React.Fragment can only have `key` and `children` props.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('does not warn for fragments of multiple elements without keys', async () => {\n@@ -271,19 +301,24 @@ describe('ReactJSXElementValidator', () => {\n });\n \n it('warns for fragments of multiple elements with same key', async () => {\n- await expect(async () => {\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(\n- <>\n- 1<\/span>\n- 2<\/span>\n- 3<\/span>\n- <\/>,\n- );\n- });\n- }).toErrorDev('Encountered two children with the same key, `a`.');\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ <>\n+ 1<\/span>\n+ 2<\/span>\n+ 3<\/span>\n+ <\/>,\n+ );\n+ });\n+ assertConsoleErrorDev([\n+ 'Encountered two children with the same key, `a`. ' +\n+ 'Keys should be unique so that components maintain their identity across updates. ' +\n+ 'Non-unique keys may cause children to be duplicated and\/or omitted — ' +\n+ 'the behavior is unsupported and could change in a future version.\\n' +\n+ ' in span (at **)',\n+ ]);\n });\n \n it('does not call lazy initializers eagerly', () => {\ndiff --git a\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js b\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js\nindex e3de4dbf5e..663c935caf 100644\n--- a\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactJSXRuntime-test.js\n@@ -14,6 +14,7 @@ let ReactDOMClient;\n let JSXRuntime;\n let JSXDEVRuntime;\n let act;\n+let assertConsoleErrorDev;\n \n \/\/ NOTE: Prefer to call the JSXRuntime directly in these tests so we can be\n \/\/ certain that we are testing the runtime behavior, as opposed to the Babel\n@@ -26,7 +27,7 @@ describe('ReactJSXRuntime', () => {\n JSXRuntime = require('react\/jsx-runtime');\n JSXDEVRuntime = require('react\/jsx-dev-runtime');\n ReactDOMClient = require('react-dom\/client');\n- act = require('internal-test-utils').act;\n+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n });\n \n it('allows static methods to be called using the type property', () => {\n@@ -205,41 +206,49 @@ describe('ReactJSXRuntime', () => {\n });\n }\n }\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(JSXRuntime.jsx(Parent, {}));\n- });\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(JSXRuntime.jsx(Parent, {}));\n+ });\n+ assertConsoleErrorDev([\n 'Child: `key` is not a prop. Trying to access it will result ' +\n 'in `undefined` being returned. If you need to access the same ' +\n 'value within the child component, you should pass it as a different ' +\n- 'prop. (https:\/\/react.dev\/link\/special-props)',\n- );\n+ 'prop. (https:\/\/react.dev\/link\/special-props)\\n' +\n+ (gate(flags => flags.enableOwnerStacks)\n+ ? ' in Parent (at **)'\n+ : ' in Child (at **)\\n' +\n+ ' in div (at **)\\n' +\n+ ' in Parent (at **)'),\n+ ]);\n });\n \n it('warns when a jsxs is passed something that is not an array', async () => {\n const container = document.createElement('div');\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(JSXRuntime.jsxs('div', {children: 'foo'}, null));\n- });\n- }).toErrorDev(\n- 'React.jsx: Static children should always be an array. ' +\n- 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +\n- 'Use the Babel transform instead.',\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(JSXRuntime.jsxs('div', {children: 'foo'}, null));\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'React.jsx: Static children should always be an array. ' +\n+ 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +\n+ 'Use the Babel transform instead.',\n+ ],\n {withoutStack: true},\n );\n });\n \n it('should warn when `key` is being accessed on a host element', () => {\n const element = JSXRuntime.jsxs('div', {}, '3');\n- expect(() => void element.props.key).toErrorDev(\n- 'div: `key` is not a prop. Trying to access it will result ' +\n- 'in `undefined` being returned. If you need to access the same ' +\n- 'value within the child component, you should pass it as a different ' +\n- 'prop. (https:\/\/react.dev\/link\/special-props)',\n+ void element.props.key;\n+ assertConsoleErrorDev(\n+ [\n+ 'div: `key` is not a prop. Trying to access it will result ' +\n+ 'in `undefined` being returned. If you need to access the same ' +\n+ 'value within the child component, you should pass it as a different ' +\n+ 'prop. (https:\/\/react.dev\/link\/special-props)',\n+ ],\n {withoutStack: true},\n );\n });\n@@ -263,19 +272,18 @@ describe('ReactJSXRuntime', () => {\n });\n }\n }\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(JSXRuntime.jsx(Parent, {}));\n- });\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(JSXRuntime.jsx(Parent, {}));\n+ });\n+ assertConsoleErrorDev([\n 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n 'Check the render method of `Parent`. See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n (gate(flags => flags.enableOwnerStacks)\n ? ''\n : ' in Child (at **)\\n') +\n ' in Parent (at **)',\n- );\n+ ]);\n });\n \n it('should warn when keys are passed as part of props', async () => {\n@@ -292,19 +300,19 @@ describe('ReactJSXRuntime', () => {\n });\n }\n }\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(JSXRuntime.jsx(Parent, {}));\n- });\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(JSXRuntime.jsx(Parent, {}));\n+ });\n+ assertConsoleErrorDev([\n 'A props object containing a \"key\" prop is being spread into JSX:\\n' +\n ' let props = {key: someKey, prop: ...};\\n' +\n ' \\n' +\n 'React keys must be passed directly to JSX without using spread:\\n' +\n ' let props = {prop: ...};\\n' +\n- ' ',\n- );\n+ ' \\n' +\n+ ' in Parent (at **)',\n+ ]);\n });\n \n it('should not warn when unkeyed children are passed to jsxs', async () => {\n@@ -368,13 +376,18 @@ describe('ReactJSXRuntime', () => {\n key: 'key',\n };\n \n- let elementWithSpreadKey;\n- expect(() => {\n- elementWithSpreadKey = __DEV__\n- ? JSXDEVRuntime.jsxDEV('div', configWithKey)\n- : JSXRuntime.jsx('div', configWithKey);\n- }).toErrorDev(\n- 'A props object containing a \"key\" prop is being spread into JSX',\n+ const elementWithSpreadKey = __DEV__\n+ ? JSXDEVRuntime.jsxDEV('div', configWithKey)\n+ : JSXRuntime.jsx('div', configWithKey);\n+ assertConsoleErrorDev(\n+ [\n+ 'A props object containing a \"key\" prop is being spread into JSX:\\n' +\n+ ' let props = {key: someKey, foo: ..., bar: ...};\\n' +\n+ '

\\n' +\n+ 'React keys must be passed directly to JSX without using spread:\\n' +\n+ ' let props = {foo: ..., bar: ...};\\n' +\n+ '

',\n+ ],\n {withoutStack: true},\n );\n expect(elementWithSpreadKey.props).not.toBe(configWithKey);\ndiff --git a\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js b\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js\nindex f0caf6b494..5075c4a9a0 100644\n--- a\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactJSXTransformIntegration-test.js\n@@ -12,6 +12,7 @@\n let React;\n let ReactDOMClient;\n let act;\n+let assertConsoleErrorDev;\n \n \/\/ TODO: Historically this module was used to confirm that the JSX transform\n \/\/ produces the correct output. However, most users (and indeed our own test\n@@ -29,7 +30,7 @@ describe('ReactJSXTransformIntegration', () => {\n \n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n- act = require('internal-test-utils').act;\n+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n \n Component = class extends React.Component {\n render() {\n@@ -112,8 +113,13 @@ describe('ReactJSXTransformIntegration', () => {\n const ref = React.createRef();\n const element = ;\n expect(element.type).toBe(Component);\n- expect(() => expect(element.ref).toBe(ref)).toErrorDev(\n- 'Accessing element.ref was removed in React 19',\n+ expect(element.ref).toBe(ref);\n+ assertConsoleErrorDev(\n+ [\n+ 'Accessing element.ref was removed in React 19. ref is now a ' +\n+ 'regular prop. It will be removed from the JSX Element ' +\n+ 'type in a future release.',\n+ ],\n {withoutStack: true},\n );\n const expectation = {foo: '56', ref};\ndiff --git a\/packages\/react\/src\/__tests__\/ReactProfilerComponent-test.internal.js b\/packages\/react\/src\/__tests__\/ReactProfilerComponent-test.internal.js\nindex d8fc623a3d..20395118c5 100644\n--- a\/packages\/react\/src\/__tests__\/ReactProfilerComponent-test.internal.js\n+++ b\/packages\/react\/src\/__tests__\/ReactProfilerComponent-test.internal.js\n@@ -14,6 +14,7 @@ let ReactDOMClient;\n let ReactFeatureFlags;\n let act;\n let container;\n+let assertConsoleErrorDev;\n \n function loadModules({\n enableProfilerTimer = true,\n@@ -31,6 +32,7 @@ function loadModules({\n ReactDOMClient = require('react-dom\/client');\n const InternalTestUtils = require('internal-test-utils');\n act = InternalTestUtils.act;\n+ assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;\n }\n \n describe('Profiler', () => {\n@@ -54,12 +56,13 @@ describe('Profiler', () => {\n if (__DEV__ && enableProfilerTimer) {\n it('should warn if required params are missing', async () => {\n const root = ReactDOMClient.createRoot(container);\n- await expect(async () => {\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'Profiler must specify an \"id\" of type `string` as a prop. Received the type `undefined` instead.',\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Profiler must specify an \"id\" of type `string` as a prop. Received the type `undefined` instead.',\n+ ],\n {\n withoutStack: true,\n },\ndiff --git a\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js b\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js\nindex 9efdf183ee..c54945ff25 100644\n--- a\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactPureComponent-test.js\n@@ -10,13 +10,13 @@\n 'use strict';\n \n let act;\n-\n+let assertConsoleErrorDev;\n let React;\n let ReactDOMClient;\n \n describe('ReactPureComponent', () => {\n beforeEach(() => {\n- act = require('internal-test-utils').act;\n+ ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n \n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n@@ -90,16 +90,15 @@ describe('ReactPureComponent', () => {\n \n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\n- await expect(async () => {\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- '' +\n- 'Component has a method called shouldComponentUpdate(). ' +\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n+ 'Component has a method called shouldComponentUpdate(). ' +\n 'shouldComponentUpdate should not be used when extending React.PureComponent. ' +\n- 'Please extend React.Component if shouldComponentUpdate is used.',\n- );\n+ 'Please extend React.Component if shouldComponentUpdate is used.\\n' +\n+ ' in Component (at **)',\n+ ]);\n await act(() => {\n root.render();\n });\n@@ -133,15 +132,14 @@ describe('ReactPureComponent', () => {\n }\n }\n const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await expect(async () => {\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- '' +\n- 'PureComponent has a method called shouldComponentUpdate(). ' +\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n+ 'PureComponent has a method called shouldComponentUpdate(). ' +\n 'shouldComponentUpdate should not be used when extending React.PureComponent. ' +\n- 'Please extend React.Component if shouldComponentUpdate is used.',\n- );\n+ 'Please extend React.Component if shouldComponentUpdate is used.\\n' +\n+ ' in PureComponent (at **)',\n+ ]);\n });\n });\ndiff --git a\/packages\/react\/src\/__tests__\/ReactStartTransition-test.js b\/packages\/react\/src\/__tests__\/ReactStartTransition-test.js\nindex 9e689ac6e7..00387dbb26 100644\n--- a\/packages\/react\/src\/__tests__\/ReactStartTransition-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactStartTransition-test.js\n@@ -12,6 +12,7 @@\n let React;\n let ReactTestRenderer;\n let act;\n+let assertConsoleWarnDev;\n let useState;\n let useTransition;\n \n@@ -22,7 +23,7 @@ describe('ReactStartTransition', () => {\n jest.resetModules();\n React = require('react');\n ReactTestRenderer = require('react-test-renderer');\n- act = require('internal-test-utils').act;\n+ ({act, assertConsoleWarnDev} = require('internal-test-utils'));\n useState = React.useState;\n useTransition = React.useTransition;\n });\n@@ -53,15 +54,14 @@ describe('ReactStartTransition', () => {\n });\n });\n \n- await expect(async () => {\n- await act(() => {\n- React.startTransition(() => {\n- subs.forEach(setState => {\n- setState(state => state + 1);\n- });\n+ await act(() => {\n+ React.startTransition(() => {\n+ subs.forEach(setState => {\n+ setState(state => state + 1);\n });\n });\n- }).toWarnDev(\n+ });\n+ assertConsoleWarnDev(\n [\n 'Detected a large number of updates inside startTransition. ' +\n 'If this is due to a subscription please re-write it to use React provided hooks. ' +\n@@ -70,15 +70,14 @@ describe('ReactStartTransition', () => {\n {withoutStack: true},\n );\n \n- await expect(async () => {\n- await act(() => {\n- triggerHookTransition(() => {\n- subs.forEach(setState => {\n- setState(state => state + 1);\n- });\n+ await act(() => {\n+ triggerHookTransition(() => {\n+ subs.forEach(setState => {\n+ setState(state => state + 1);\n });\n });\n- }).toWarnDev(\n+ });\n+ assertConsoleWarnDev(\n [\n 'Detected a large number of updates inside startTransition. ' +\n 'If this is due to a subscription please re-write it to use React provided hooks. ' +\ndiff --git a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js\nindex f28c70a871..6d44a28881 100644\n--- a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.js\n@@ -19,6 +19,7 @@ let useMemo;\n let useState;\n let useReducer;\n let assertConsoleErrorDev;\n+let assertConsoleWarnDev;\n \n describe('ReactStrictMode', () => {\n beforeEach(() => {\n@@ -27,7 +28,11 @@ describe('ReactStrictMode', () => {\n ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n ReactDOMServer = require('react-dom\/server');\n- ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n+ ({\n+ act,\n+ assertConsoleErrorDev,\n+ assertConsoleWarnDev,\n+ } = require('internal-test-utils'));\n useMemo = React.useMemo;\n useState = React.useState;\n useReducer = React.useReducer;\n@@ -40,20 +45,19 @@ describe('ReactStrictMode', () => {\n \n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\n- await expect(async () => {\n- await act(() => {\n- root.render(\n- \n- \n- <\/React.StrictMode>,\n- );\n- });\n- }).toErrorDev(\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ });\n+ assertConsoleErrorDev([\n 'Invalid ARIA attribute `ariaTypo`. ' +\n 'ARIA attributes follow the pattern aria-* and must be lowercase.\\n' +\n ' in div (at **)\\n' +\n ' in Foo (at **)',\n- );\n+ ]);\n });\n \n it('should appear in the SSR component stack', () => {\n@@ -61,18 +65,17 @@ describe('ReactStrictMode', () => {\n return

;\n }\n \n- expect(() => {\n- ReactDOMServer.renderToString(\n- \n- \n- <\/React.StrictMode>,\n- );\n- }).toErrorDev(\n+ ReactDOMServer.renderToString(\n+ \n+ \n+ <\/React.StrictMode>,\n+ );\n+ assertConsoleErrorDev([\n 'Invalid ARIA attribute `ariaTypo`. ' +\n 'ARIA attributes follow the pattern aria-* and must be lowercase.\\n' +\n ' in div (at **)\\n' +\n ' in Foo (at **)',\n- );\n+ ]);\n });\n \n \/\/ @gate __DEV__\n@@ -620,9 +623,8 @@ describe('Concurrent Mode', () => {\n \n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\n- await expect(\n- async () => await act(() => root.render()),\n- ).toErrorDev(\n+ await act(() => root.render());\n+ assertConsoleErrorDev(\n [\n `Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\n \n@@ -681,31 +683,29 @@ Please update the following components: App`,\n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\n \n- await expect(async () => {\n- await expect(\n- async () => await act(() => root.render()),\n- ).toErrorDev(\n- [\n- `Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\n+ await act(() => root.render());\n+ assertConsoleErrorDev(\n+ [\n+ `Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. 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 \n Please update the following components: App`,\n- `Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\n+ `Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. 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 \n Please update the following components: Child`,\n- `Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\n+ `Using UNSAFE_componentWillUpdate in strict mode is not recommended and may indicate bugs in your code. See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\n \n * Move data fetching code or side effects to componentDidUpdate.\n \n Please update the following components: App`,\n- ],\n- {withoutStack: true},\n- );\n- }).toWarnDev(\n+ ],\n+ {withoutStack: true},\n+ );\n+ assertConsoleWarnDev(\n [\n `componentWillMount has been renamed, and is not recommended for use. See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\n \n@@ -752,17 +752,25 @@ Please update the following components: Parent`,\n \n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\n- await expect(async () => {\n- await act(() => root.render());\n- }).toErrorDev(\n- 'Using UNSAFE_componentWillMount in strict mode is not recommended',\n+ await act(() => root.render());\n+ assertConsoleErrorDev(\n+ [\n+ 'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move code with side effects to componentDidMount, and set initial state in the constructor.\\n\\n' +\n+ 'Please update the following components: Foo',\n+ ],\n {withoutStack: true},\n );\n \n- await expect(async () => {\n- await act(() => root.render());\n- }).toErrorDev(\n- 'Using UNSAFE_componentWillMount in strict mode is not recommended',\n+ await act(() => root.render());\n+ assertConsoleErrorDev(\n+ [\n+ 'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move code with side effects to componentDidMount, and set initial state in the constructor.\\n\\n' +\n+ 'Please update the following components: Bar',\n+ ],\n {withoutStack: true},\n );\n \n@@ -810,12 +818,20 @@ Please update the following components: Parent`,\n const container = document.createElement('div');\n \n const root = ReactDOMClient.createRoot(container);\n- await expect(async () => {\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ' +\n+ 'and may indicate bugs in your code. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n+ \"* If you're updating state whenever props change, \" +\n+ 'refactor your code to use memoization techniques or move it to ' +\n+ 'static getDerivedStateFromProps. Learn more at: https:\/\/react.dev\/link\/derived-state\\n\\n' +\n+ 'Please update the following components: Bar, Foo',\n+ ],\n {withoutStack: true},\n );\n \ndiff --git a\/packages\/react\/src\/__tests__\/ReactTypeScriptClass-test.ts b\/packages\/react\/src\/__tests__\/ReactTypeScriptClass-test.ts\nindex 00e3a8b3ff..5f51cc6f38 100644\n--- a\/packages\/react\/src\/__tests__\/ReactTypeScriptClass-test.ts\n+++ b\/packages\/react\/src\/__tests__\/ReactTypeScriptClass-test.ts\n@@ -16,9 +16,11 @@ import ReactDOM = require('react-dom');\n import ReactDOMClient = require('react-dom\/client');\n import PropTypes = require('prop-types');\n import ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+import TestUtils = require('internal-test-utils');\n \n \/\/ Before Each\n-\n+const assertConsoleErrorDev = TestUtils.assertConsoleErrorDev;\n+const assertConsoleWarnDev = TestUtils.assertConsoleWarnDev;\n let container;\n let root;\n let attachedListener = null;\n@@ -313,19 +315,19 @@ class ClassicRefs extends React.Component {\n \n \/\/ Describe the actual test cases.\n \n-describe('ReactTypeScriptClass', function() {\n- beforeEach(function() {\n+describe('ReactTypeScriptClass', function () {\n+ beforeEach(function () {\n container = document.createElement('div');\n root = ReactDOMClient.createRoot(container);\n attachedListener = null;\n renderedName = null;\n });\n \n- it('preserves the name of the class for use in error messages', function() {\n+ it('preserves the name of the class for use in error messages', function () {\n expect(Empty.name).toBe('Empty');\n });\n \n- it('throws if no render function is defined', function() {\n+ it('throws if no render function is defined', function () {\n class Foo extends React.Component {}\n const caughtErrors = [];\n function errorHandler(event) {\n@@ -334,14 +336,15 @@ describe('ReactTypeScriptClass', function() {\n }\n window.addEventListener('error', errorHandler);\n try {\n- expect(() => {\n- ReactDOM.flushSync(() => root.render(React.createElement(Empty)))\n- }).toErrorDev([\n+ ReactDOM.flushSync(() => root.render(React.createElement(Empty)));\n+ assertConsoleErrorDev([\n \/\/ A failed component renders twice in DEV in concurrent mode\n 'No `render` method found on the Empty instance: ' +\n- 'you may have forgotten to define `render`.',\n+ 'you may have forgotten to define `render`.\\n' +\n+ ' in Empty (at **)',\n 'No `render` method found on the Empty instance: ' +\n- 'you may have forgotten to define `render`.',\n+ 'you may have forgotten to define `render`.\\n' +\n+ ' in Empty (at **)',\n ]);\n } finally {\n window.removeEventListener('error', errorHandler);\n@@ -349,31 +352,31 @@ describe('ReactTypeScriptClass', function() {\n expect(caughtErrors.length).toBe(1);\n });\n \n- it('renders a simple stateless component with prop', function() {\n+ it('renders a simple stateless component with prop', function () {\n test(React.createElement(SimpleStateless, {bar: 'foo'}), 'DIV', 'foo');\n test(React.createElement(SimpleStateless, {bar: 'bar'}), 'DIV', 'bar');\n });\n \n- it('renders based on state using initial values in this.props', function() {\n+ it('renders based on state using initial values in this.props', function () {\n test(\n React.createElement(InitialState, {initialValue: 'foo'}),\n 'SPAN',\n- 'foo'\n+ 'foo',\n );\n });\n \n- it('renders based on state using props in the constructor', function() {\n+ it('renders based on state using props in the constructor', function () {\n const ref = React.createRef();\n test(\n React.createElement(StateBasedOnProps, {initialValue: 'foo', ref: ref}),\n 'DIV',\n- 'foo'\n+ 'foo',\n );\n ReactDOM.flushSync(() => ref.current.changeState());\n test(React.createElement(StateBasedOnProps), 'SPAN', 'bar');\n });\n \n- it('sets initial state with value returned by static getDerivedStateFromProps', function() {\n+ it('sets initial state with value returned by static getDerivedStateFromProps', function () {\n class Foo extends React.Component {\n state = {\n foo: null,\n@@ -394,7 +397,7 @@ describe('ReactTypeScriptClass', function() {\n test(React.createElement(Foo, {foo: 'foo'}), 'DIV', 'foo bar');\n });\n \n- it('warns if getDerivedStateFromProps is not static', function() {\n+ it('warns if getDerivedStateFromProps is not static', function () {\n class Foo extends React.Component {\n getDerivedStateFromProps() {\n return {};\n@@ -403,17 +406,17 @@ describe('ReactTypeScriptClass', function() {\n return React.createElement('div', {});\n }\n }\n- expect(function() {\n- ReactDOM.flushSync(() =>\n- root.render(React.createElement(Foo, {foo: 'foo'}))\n- );\n- }).toErrorDev(\n- 'Foo: getDerivedStateFromProps() is defined as an instance method ' +\n- 'and will be ignored. Instead, declare it as a static method.'\n+ ReactDOM.flushSync(() =>\n+ root.render(React.createElement(Foo, {foo: 'foo'})),\n );\n+ assertConsoleErrorDev([\n+ 'Foo: getDerivedStateFromProps() is defined as an instance method ' +\n+ 'and will be ignored. Instead, declare it as a static method.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n- it('warns if getDerivedStateFromError is not static', function() {\n+ it('warns if getDerivedStateFromError is not static', function () {\n class Foo extends React.Component {\n getDerivedStateFromError() {\n return {};\n@@ -422,34 +425,34 @@ describe('ReactTypeScriptClass', function() {\n return React.createElement('div');\n }\n }\n- expect(function() {\n- ReactDOM.flushSync(() =>\n- root.render(React.createElement(Foo, {foo: 'foo'}))\n- );\n- }).toErrorDev(\n- 'Foo: getDerivedStateFromError() is defined as an instance method ' +\n- 'and will be ignored. Instead, declare it as a static method.'\n+ ReactDOM.flushSync(() =>\n+ root.render(React.createElement(Foo, {foo: 'foo'})),\n );\n+ assertConsoleErrorDev([\n+ 'Foo: getDerivedStateFromError() is defined as an instance method ' +\n+ 'and will be ignored. Instead, declare it as a static method.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n- it('warns if getSnapshotBeforeUpdate is static', function() {\n+ it('warns if getSnapshotBeforeUpdate is static', function () {\n class Foo extends React.Component {\n static getSnapshotBeforeUpdate() {}\n render() {\n return React.createElement('div', {});\n }\n }\n- expect(function() {\n- ReactDOM.flushSync(() =>\n- root.render(React.createElement(Foo, {foo: 'foo'}))\n- );\n- }).toErrorDev(\n- 'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +\n- 'and will be ignored. Instead, declare it as an instance method.'\n+ ReactDOM.flushSync(() =>\n+ root.render(React.createElement(Foo, {foo: 'foo'})),\n );\n+ assertConsoleErrorDev([\n+ 'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +\n+ 'and will be ignored. Instead, declare it as an instance method.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n- it('warns if state not initialized before static getDerivedStateFromProps', function() {\n+ it('warns if state not initialized before static getDerivedStateFromProps', function () {\n class Foo extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n return {\n@@ -463,19 +466,19 @@ describe('ReactTypeScriptClass', function() {\n });\n }\n }\n- expect(function() {\n- ReactDOM.flushSync(() =>\n- root.render(React.createElement(Foo, {foo: 'foo'}))\n- );\n- }).toErrorDev(\n+ ReactDOM.flushSync(() =>\n+ root.render(React.createElement(Foo, {foo: 'foo'})),\n+ );\n+ assertConsoleErrorDev([\n '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +\n 'undefined. This is not recommended. Instead, define the initial state by ' +\n 'assigning an object to `this.state` in the constructor of `Foo`. ' +\n- 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.'\n- );\n+ 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n- it('updates initial state with values returned by static getDerivedStateFromProps', function() {\n+ it('updates initial state with values returned by static getDerivedStateFromProps', function () {\n class Foo extends React.Component {\n state = {\n foo: 'foo',\n@@ -495,7 +498,7 @@ describe('ReactTypeScriptClass', function() {\n test(React.createElement(Foo), 'DIV', 'not-foo bar');\n });\n \n- it('renders updated state with values returned by static getDerivedStateFromProps', function() {\n+ it('renders updated state with values returned by static getDerivedStateFromProps', function () {\n class Foo extends React.Component {\n state = {\n value: 'initial',\n@@ -517,66 +520,80 @@ describe('ReactTypeScriptClass', function() {\n });\n \n if (!ReactFeatureFlags.disableLegacyContext) {\n- it('renders based on context in the constructor', function() {\n- expect(() => test(React.createElement(ProvideChildContextTypes), 'SPAN', 'foo')).toErrorDev([\n- 'ProvideChildContextTypes uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',\n- 'StateBasedOnContext uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.'\n+ it('renders based on context in the constructor', function () {\n+ test(React.createElement(ProvideChildContextTypes), 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n+ 'ProvideChildContextTypes uses the legacy childContextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ ' in ProvideChildContextTypes (at **)',\n+ 'StateBasedOnContext uses the legacy contextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() with static contextType instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ (ReactFeatureFlags.enableOwnerStacks\n+ ? ' in ProvideChildContextTypes.Object..ProvideChildContextTypes (at **)'\n+ : ' in StateBasedOnContext (at **)\\n') +\n+ ' in ProvideChildContextTypes (at **)',\n ]);\n });\n }\n \n- it('renders only once when setting state in componentWillMount', function() {\n+ it('renders only once when setting state in componentWillMount', function () {\n renderCount = 0;\n test(React.createElement(RenderOnce, {initialValue: 'foo'}), 'SPAN', 'bar');\n expect(renderCount).toBe(1);\n });\n \n- it('should warn with non-object in the initial state property', function() {\n- expect(() => test(React.createElement(ArrayState), 'SPAN', '')).toErrorDev(\n- 'ArrayState.state: must be set to an object or null'\n- );\n- expect(() => test(React.createElement(StringState), 'SPAN', '')).toErrorDev(\n- 'StringState.state: must be set to an object or null'\n- );\n- expect(() => test(React.createElement(NumberState), 'SPAN', '')).toErrorDev(\n- 'NumberState.state: must be set to an object or null'\n- );\n+ it('should warn with non-object in the initial state property', function () {\n+ test(React.createElement(ArrayState), 'SPAN', '');\n+ assertConsoleErrorDev([\n+ 'ArrayState.state: must be set to an object or null\\n' +\n+ ' in ArrayState (at **)',\n+ ]);\n+ test(React.createElement(StringState), 'SPAN', '');\n+ assertConsoleErrorDev([\n+ 'StringState.state: must be set to an object or null\\n' +\n+ ' in StringState (at **)',\n+ ]);\n+ test(React.createElement(NumberState), 'SPAN', '');\n+ assertConsoleErrorDev([\n+ 'NumberState.state: must be set to an object or null\\n' +\n+ ' in NumberState (at **)',\n+ ]);\n });\n \n- it('should render with null in the initial state property', function() {\n+ it('should render with null in the initial state property', function () {\n test(React.createElement(NullState), 'SPAN', '');\n });\n \n- it('setState through an event handler', function() {\n+ it('setState through an event handler', function () {\n test(\n React.createElement(BoundEventHandler, {initialValue: 'foo'}),\n 'DIV',\n- 'foo'\n+ 'foo',\n );\n ReactDOM.flushSync(() => attachedListener());\n expect(renderedName).toBe('bar');\n });\n \n- it('should not implicitly bind event handlers', function() {\n+ it('should not implicitly bind event handlers', function () {\n test(\n React.createElement(UnboundEventHandler, {initialValue: 'foo'}),\n 'DIV',\n- 'foo'\n+ 'foo',\n );\n expect(attachedListener).toThrow();\n });\n \n- it('renders using forceUpdate even when there is no state', function() {\n+ it('renders using forceUpdate even when there is no state', function () {\n test(\n React.createElement(ForceUpdateWithNoState, {initialValue: 'foo'}),\n 'DIV',\n- 'foo'\n+ 'foo',\n );\n ReactDOM.flushSync(() => attachedListener());\n expect(renderedName).toBe('bar');\n });\n \n- it('will call all the normal life cycle methods', function() {\n+ it('will call all the normal life cycle methods', function () {\n lifeCycles = [];\n test(React.createElement(NormalLifeCycles, {value: 'foo'}), 'SPAN', 'foo');\n expect(lifeCycles).toEqual(['will-mount', 'did-mount']);\n@@ -604,22 +621,29 @@ describe('ReactTypeScriptClass', function() {\n it(\n 'warns when classic properties are defined on the instance, ' +\n 'but does not invoke them.',\n- function() {\n+ function () {\n getInitialStateWasCalled = false;\n getDefaultPropsWasCalled = false;\n- expect(() =>\n- test(React.createElement(ClassicProperties), 'SPAN', 'foo')\n- ).toErrorDev([\n- 'getInitialState was defined on ClassicProperties, ' +\n- 'a plain JavaScript class.',\n- 'getDefaultProps was defined on ClassicProperties, ' +\n- 'a plain JavaScript class.',\n- 'contextTypes was defined as an instance property on ClassicProperties.',\n- 'contextType was defined as an instance property on ClassicProperties.',\n+ test(React.createElement(ClassicProperties), 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n+ 'getInitialState was defined on ClassicProperties, a plain JavaScript class. ' +\n+ 'This is only supported for classes created using React.createClass. ' +\n+ 'Did you mean to define a state property instead?\\n' +\n+ ' in ClassicProperties (at **)',\n+ 'getDefaultProps was defined on ClassicProperties, a plain JavaScript class. ' +\n+ 'This is only supported for classes created using React.createClass. ' +\n+ 'Use a static property to define defaultProps instead.\\n' +\n+ ' in ClassicProperties (at **)',\n+ 'contextType was defined as an instance property on ClassicProperties. ' +\n+ 'Use a static property to define contextType instead.\\n' +\n+ ' in ClassicProperties (at **)',\n+ 'contextTypes was defined as an instance property on ClassicProperties. ' +\n+ 'Use a static property to define contextTypes instead.\\n' +\n+ ' in ClassicProperties (at **)',\n ]);\n expect(getInitialStateWasCalled).toBe(false);\n expect(getDefaultPropsWasCalled).toBe(false);\n- }\n+ },\n );\n }\n \n@@ -638,63 +662,73 @@ describe('ReactTypeScriptClass', function() {\n }\n \n test(React.createElement(Example), 'SPAN', 'foo');\n- }\n+ },\n );\n \n- it('should warn when misspelling shouldComponentUpdate', function() {\n- expect(() =>\n- test(React.createElement(MisspelledComponent1), 'SPAN', 'foo')\n- ).toErrorDev(\n- '' +\n- 'MisspelledComponent1 has a method called componentShouldUpdate(). Did ' +\n+ it('should warn when misspelling shouldComponentUpdate', function () {\n+ test(React.createElement(MisspelledComponent1), 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n+ 'MisspelledComponent1 has a method called componentShouldUpdate(). Did ' +\n 'you mean shouldComponentUpdate()? The name is phrased as a question ' +\n- 'because the function is expected to return a value.'\n- );\n+ 'because the function is expected to return a value.\\n' +\n+ ' in MisspelledComponent1 (at **)',\n+ ]);\n });\n \n- it('should warn when misspelling componentWillReceiveProps', function() {\n- expect(() =>\n- test(React.createElement(MisspelledComponent2), 'SPAN', 'foo')\n- ).toErrorDev(\n- '' +\n- 'MisspelledComponent2 has a method called componentWillRecieveProps(). ' +\n- 'Did you mean componentWillReceiveProps()?'\n- );\n+ it('should warn when misspelling componentWillReceiveProps', function () {\n+ test(React.createElement(MisspelledComponent2), 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n+ 'MisspelledComponent2 has a method called componentWillRecieveProps(). ' +\n+ 'Did you mean componentWillReceiveProps()?\\n' +\n+ ' in MisspelledComponent2 (at **)',\n+ ]);\n });\n \n- it('should warn when misspelling UNSAFE_componentWillReceiveProps', function() {\n- expect(() =>\n- test(React.createElement(MisspelledComponent3), 'SPAN', 'foo')\n- ).toErrorDev(\n- '' +\n- 'MisspelledComponent3 has a method called UNSAFE_componentWillRecieveProps(). ' +\n- 'Did you mean UNSAFE_componentWillReceiveProps()?'\n- );\n+ it('should warn when misspelling UNSAFE_componentWillReceiveProps', function () {\n+ test(React.createElement(MisspelledComponent3), 'SPAN', 'foo');\n+ assertConsoleErrorDev([\n+ 'MisspelledComponent3 has a method called UNSAFE_componentWillRecieveProps(). ' +\n+ 'Did you mean UNSAFE_componentWillReceiveProps()?\\n' +\n+ ' in MisspelledComponent3 (at **)',\n+ ]);\n });\n \n- it('should throw AND warn when trying to access classic APIs', function() {\n+ it('should throw AND warn when trying to access classic APIs', function () {\n const ref = React.createRef();\n test(React.createElement(Inner, {name: 'foo', ref: ref}), 'DIV', 'foo');\n- expect(() =>\n- expect(() => ref.current.replaceState({})).toThrow()\n- ).toWarnDev(\n- 'replaceState(...) is deprecated in plain JavaScript React classes',\n- {withoutStack: true}\n+ expect(() => ref.current.replaceState({})).toThrow();\n+ assertConsoleWarnDev(\n+ [\n+ 'replaceState(...) is deprecated in plain JavaScript React classes. ' +\n+ 'Refactor your code to use setState instead (see https:\/\/github.com\/facebook\/react\/issues\/3236).',\n+ ],\n+ {withoutStack: true},\n );\n- expect(() =>\n- expect(() => ref.current.isMounted()).toThrow()\n- ).toWarnDev(\n- 'isMounted(...) is deprecated in plain JavaScript React classes',\n- {withoutStack: true}\n+ expect(() => ref.current.isMounted()).toThrow();\n+ assertConsoleWarnDev(\n+ [\n+ 'isMounted(...) is deprecated in plain JavaScript React classes. ' +\n+ 'Instead, make sure to clean up subscriptions and pending requests in ' +\n+ 'componentWillUnmount to prevent memory leaks.',\n+ ],\n+ {withoutStack: true},\n );\n });\n \n if (!ReactFeatureFlags.disableLegacyContext) {\n it('supports this.context passed via getChildContext', () => {\n- expect(() => test(React.createElement(ProvideContext), 'DIV', 'bar-through-context')).toErrorDev([\n- 'ProvideContext uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',\n- 'ReadContext uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',\n-] );\n+ test(React.createElement(ProvideContext), 'DIV', 'bar-through-context');\n+ assertConsoleErrorDev([\n+ 'ProvideContext uses the legacy childContextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ ' in ProvideContext (at **)',\n+ 'ReadContext uses the legacy contextTypes API which will soon be removed. ' +\n+ 'Use React.createContext() with static contextType instead. (https:\/\/react.dev\/link\/legacy-context)\\n' +\n+ (ReactFeatureFlags.enableOwnerStacks\n+ ? ' in ProvideContext.Object..ProvideContext (at **)'\n+ : ' in ReadContext (at **)\\n') +\n+ ' in ProvideContext (at **)',\n+ ]);\n });\n }\n });\ndiff --git a\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js b\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\nindex 4aabc11b52..6bd3f06921 100644\n--- a\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\n+++ b\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\n@@ -11,6 +11,7 @@\n \n let act;\n let assertConsoleErrorDev;\n+let assertConsoleWarnDev;\n \n let PropTypes;\n let React;\n@@ -20,7 +21,11 @@ let createReactClass;\n describe('create-react-class-integration', () => {\n beforeEach(() => {\n jest.resetModules();\n- ({act, assertConsoleErrorDev} = require('internal-test-utils'));\n+ ({\n+ act,\n+ assertConsoleErrorDev,\n+ assertConsoleWarnDev,\n+ } = require('internal-test-utils'));\n PropTypes = require('prop-types');\n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n@@ -53,124 +58,130 @@ describe('create-react-class-integration', () => {\n });\n \n it('should warn on invalid prop types', () => {\n- expect(() =>\n- createReactClass({\n- displayName: 'Component',\n- propTypes: {\n- prop: null,\n- },\n- render: function () {\n- return {this.props.prop}<\/span>;\n- },\n- }),\n- ).toErrorDev(\n- 'Component: prop type `prop` is invalid; ' +\n- 'it must be a function, usually from React.PropTypes.',\n+ createReactClass({\n+ displayName: 'Component',\n+ propTypes: {\n+ prop: null,\n+ },\n+ render: function () {\n+ return {this.props.prop}<\/span>;\n+ },\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: Component: prop type `prop` is invalid; ' +\n+ 'it must be a function, usually from React.PropTypes.',\n+ ],\n {withoutStack: true},\n );\n });\n \n it('should warn on invalid context types', () => {\n- expect(() =>\n- createReactClass({\n- displayName: 'Component',\n- contextTypes: {\n- prop: null,\n- },\n- render: function () {\n- return {this.props.prop}<\/span>;\n- },\n- }),\n- ).toErrorDev(\n- 'Component: context type `prop` is invalid; ' +\n- 'it must be a function, usually from React.PropTypes.',\n+ createReactClass({\n+ displayName: 'Component',\n+ contextTypes: {\n+ prop: null,\n+ },\n+ render: function () {\n+ return {this.props.prop}<\/span>;\n+ },\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: Component: context type `prop` is invalid; ' +\n+ 'it must be a function, usually from React.PropTypes.',\n+ ],\n {withoutStack: true},\n );\n });\n \n it('should throw on invalid child context types', () => {\n- expect(() =>\n- createReactClass({\n- displayName: 'Component',\n- childContextTypes: {\n- prop: null,\n- },\n- render: function () {\n- return {this.props.prop}<\/span>;\n- },\n- }),\n- ).toErrorDev(\n- 'Component: child context type `prop` is invalid; ' +\n- 'it must be a function, usually from React.PropTypes.',\n+ createReactClass({\n+ displayName: 'Component',\n+ childContextTypes: {\n+ prop: null,\n+ },\n+ render: function () {\n+ return {this.props.prop}<\/span>;\n+ },\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: Component: child context type `prop` is invalid; it must be a function, usually from React.PropTypes.',\n+ ],\n {withoutStack: true},\n );\n });\n \n it('should warn when misspelling shouldComponentUpdate', () => {\n- expect(() =>\n- createReactClass({\n- componentShouldUpdate: function () {\n- return false;\n- },\n- render: function () {\n- return

;\n- },\n- }),\n- ).toErrorDev(\n- 'A component has a method called componentShouldUpdate(). Did you ' +\n- 'mean shouldComponentUpdate()? The name is phrased as a question ' +\n- 'because the function is expected to return a value.',\n+ createReactClass({\n+ componentShouldUpdate: function () {\n+ return false;\n+ },\n+ render: function () {\n+ return

;\n+ },\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: A component has a method called componentShouldUpdate(). Did you ' +\n+ 'mean shouldComponentUpdate()? The name is phrased as a question ' +\n+ 'because the function is expected to return a value.',\n+ ],\n {withoutStack: true},\n );\n \n- expect(() =>\n- createReactClass({\n- displayName: 'NamedComponent',\n- componentShouldUpdate: function () {\n- return false;\n- },\n- render: function () {\n- return

;\n- },\n- }),\n- ).toErrorDev(\n- 'NamedComponent has a method called componentShouldUpdate(). Did you ' +\n- 'mean shouldComponentUpdate()? The name is phrased as a question ' +\n- 'because the function is expected to return a value.',\n+ createReactClass({\n+ displayName: 'NamedComponent',\n+ componentShouldUpdate: function () {\n+ return false;\n+ },\n+ render: function () {\n+ return

;\n+ },\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: NamedComponent has a method called componentShouldUpdate(). Did you ' +\n+ 'mean shouldComponentUpdate()? The name is phrased as a question ' +\n+ 'because the function is expected to return a value.',\n+ ],\n {withoutStack: true},\n );\n });\n \n it('should warn when misspelling componentWillReceiveProps', () => {\n- expect(() =>\n- createReactClass({\n- componentWillRecieveProps: function () {\n- return false;\n- },\n- render: function () {\n- return

;\n- },\n- }),\n- ).toErrorDev(\n- 'A component has a method called componentWillRecieveProps(). Did you ' +\n- 'mean componentWillReceiveProps()?',\n+ createReactClass({\n+ componentWillRecieveProps: function () {\n+ return false;\n+ },\n+ render: function () {\n+ return

;\n+ },\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: A component has a method called componentWillRecieveProps(). Did you ' +\n+ 'mean componentWillReceiveProps()?',\n+ ],\n {withoutStack: true},\n );\n });\n \n it('should warn when misspelling UNSAFE_componentWillReceiveProps', () => {\n- expect(() =>\n- createReactClass({\n- UNSAFE_componentWillRecieveProps: function () {\n- return false;\n- },\n- render: function () {\n- return

;\n- },\n- }),\n- ).toErrorDev(\n- 'A component has a method called UNSAFE_componentWillRecieveProps(). ' +\n- 'Did you mean UNSAFE_componentWillReceiveProps()?',\n+ createReactClass({\n+ UNSAFE_componentWillRecieveProps: function () {\n+ return false;\n+ },\n+ render: function () {\n+ return

;\n+ },\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: A component has a method called UNSAFE_componentWillRecieveProps(). ' +\n+ 'Did you mean UNSAFE_componentWillReceiveProps()?',\n+ ],\n {withoutStack: true},\n );\n });\n@@ -201,23 +212,22 @@ describe('create-react-class-integration', () => {\n \/\/ TODO: Consider actually moving these to statics or drop this unit test.\n \/\/ eslint-disable-next-line jest\/no-disabled-tests\n it.skip('should warn when using deprecated non-static spec keys', () => {\n- expect(() =>\n- createReactClass({\n- mixins: [{}],\n- propTypes: {\n- foo: PropTypes.string,\n- },\n- contextTypes: {\n- foo: PropTypes.string,\n- },\n- childContextTypes: {\n- foo: PropTypes.string,\n- },\n- render: function () {\n- return

;\n- },\n- }),\n- ).toErrorDev([\n+ createReactClass({\n+ mixins: [{}],\n+ propTypes: {\n+ foo: PropTypes.string,\n+ },\n+ contextTypes: {\n+ foo: PropTypes.string,\n+ },\n+ childContextTypes: {\n+ foo: PropTypes.string,\n+ },\n+ render: function () {\n+ return

;\n+ },\n+ });\n+ assertConsoleErrorDev([\n '`mixins` is now a static property and should ' +\n 'be defined inside \"statics\".',\n '`propTypes` is now a static property and should ' +\n@@ -399,9 +409,12 @@ describe('create-react-class-integration', () => {\n },\n });\n \n- expect(() => expect(() => Component()).toThrow()).toErrorDev(\n- 'Something is calling a React component directly. Use a ' +\n- 'factory or JSX instead. See: https:\/\/fb.me\/react-legacyfactory',\n+ expect(() => Component()).toThrow();\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: Something is calling a React component directly. Use a ' +\n+ 'factory or JSX instead. See: https:\/\/fb.me\/react-legacyfactory',\n+ ],\n {withoutStack: true},\n );\n });\n@@ -504,15 +517,15 @@ describe('create-react-class-integration', () => {\n return

;\n },\n });\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n 'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +\n- 'and will be ignored. Instead, declare it as an instance method.',\n- );\n+ 'and will be ignored. Instead, declare it as an instance method.\\n' +\n+ ' in Foo (at **)',\n+ ]);\n });\n \n it('should warn if state is not properly initialized before getDerivedStateFromProps', async () => {\n@@ -571,17 +584,17 @@ describe('create-react-class-integration', () => {\n return null;\n },\n });\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n '`Component` uses `getDerivedStateFromProps` but its initial state is ' +\n 'null. This is not recommended. Instead, define the initial state by ' +\n 'assigning an object to `this.state` in the constructor of `Component`. ' +\n- 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',\n- );\n+ 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.\\n' +\n+ ' in Component (at **)',\n+ ]);\n });\n \n it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', async () => {\n@@ -609,30 +622,52 @@ describe('create-react-class-integration', () => {\n });\n Component.displayName = 'Component';\n \n- await expect(async () => {\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n- 'Component uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\\n' +\n- ' componentWillMount\\n' +\n- ' componentWillReceiveProps\\n' +\n- ' componentWillUpdate\\n\\n' +\n- 'The above lifecycles should be removed. Learn more about this warning here:\\n' +\n- 'https:\/\/react.dev\/link\/unsafe-component-lifecycles',\n- );\n- }).toWarnDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n+ 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n+ 'Component uses getDerivedStateFromProps() but also contains the following legacy lifecycles:\\n' +\n+ ' componentWillMount\\n' +\n+ ' componentWillReceiveProps\\n' +\n+ ' componentWillUpdate\\n\\n' +\n+ 'The above lifecycles should be removed. Learn more about this warning here:\\n' +\n+ 'https:\/\/react.dev\/link\/unsafe-component-lifecycles\\n' +\n+ ' in Component (at **)',\n+ ]);\n+ assertConsoleWarnDev(\n [\n- 'componentWillMount has been renamed',\n- 'componentWillReceiveProps has been renamed',\n- 'componentWillUpdate has been renamed',\n+ 'componentWillMount has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move code with side effects to componentDidMount, and set initial state in the constructor.\\n' +\n+ '* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n+ 'componentWillReceiveProps has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n+ \"* If you're updating state whenever props change, refactor your \" +\n+ 'code to use memoization techniques or move it to ' +\n+ 'static getDerivedStateFromProps. Learn more at: https:\/\/react.dev\/link\/derived-state\\n' +\n+ '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n+ 'componentWillUpdate has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n+ '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n ],\n {withoutStack: true},\n );\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n await act(() => {\n root.render();\n });\n@@ -659,26 +694,49 @@ describe('create-react-class-integration', () => {\n });\n Component.displayName = 'Component';\n \n- await expect(async () => {\n- await expect(async () => {\n- const root = ReactDOMClient.createRoot(document.createElement('div'));\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n- 'Component uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\\n' +\n- ' componentWillMount\\n' +\n- ' componentWillReceiveProps\\n' +\n- ' componentWillUpdate\\n\\n' +\n- 'The above lifecycles should be removed. Learn more about this warning here:\\n' +\n- 'https:\/\/react.dev\/link\/unsafe-component-lifecycles',\n- );\n- }).toWarnDev(\n+ const root = ReactDOMClient.createRoot(document.createElement('div'));\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev([\n+ 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n+ 'Component uses getSnapshotBeforeUpdate() but also contains the following legacy lifecycles:\\n' +\n+ ' componentWillMount\\n' +\n+ ' componentWillReceiveProps\\n' +\n+ ' componentWillUpdate\\n\\n' +\n+ 'The above lifecycles should be removed. Learn more about this warning here:\\n' +\n+ 'https:\/\/react.dev\/link\/unsafe-component-lifecycles\\n' +\n+ ' in Component (at **)',\n+ ]);\n+ assertConsoleWarnDev(\n [\n- 'componentWillMount has been renamed',\n- 'componentWillReceiveProps has been renamed',\n- 'componentWillUpdate has been renamed',\n+ 'componentWillMount has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move code with side effects to componentDidMount, and set initial state in the constructor.\\n' +\n+ '* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n+ 'componentWillReceiveProps has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n+ \"* If you're updating state whenever props change, refactor your \" +\n+ 'code to use memoization techniques or move it to ' +\n+ 'static getDerivedStateFromProps. Learn more at: https:\/\/react.dev\/link\/derived-state\\n' +\n+ '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n+ 'componentWillUpdate has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n+ '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n ],\n {withoutStack: true},\n );\n@@ -721,15 +779,38 @@ describe('create-react-class-integration', () => {\n \n const root = ReactDOMClient.createRoot(document.createElement('div'));\n \n- await expect(async () => {\n- await act(() => {\n- root.render();\n- });\n- }).toWarnDev(\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleWarnDev(\n [\n- 'componentWillMount has been renamed',\n- 'componentWillReceiveProps has been renamed',\n- 'componentWillUpdate has been renamed',\n+ 'componentWillMount has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move code with side effects to componentDidMount, and set initial state in the constructor.\\n' +\n+ '* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n+ 'componentWillReceiveProps has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n+ \"* If you're updating state whenever props change, refactor your \" +\n+ 'code to use memoization techniques or move it to ' +\n+ 'static getDerivedStateFromProps. Learn more at: https:\/\/react.dev\/link\/derived-state\\n' +\n+ '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n+ 'componentWillUpdate has been renamed, and is not recommended for use. ' +\n+ 'See https:\/\/react.dev\/link\/unsafe-component-lifecycles for details.\\n\\n' +\n+ '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n+ '* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress ' +\n+ 'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n+ 'To rename all deprecated lifecycles to their new names, you can run ' +\n+ '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n+ '\\nPlease update the following components: Component',\n ],\n {withoutStack: true},\n );\n@@ -803,14 +884,16 @@ describe('create-react-class-integration', () => {\n \n const root = ReactDOMClient.createRoot(document.createElement('div'));\n \n- await expect(async () => {\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- 'MyComponent: isMounted is deprecated. Instead, make sure to ' +\n- 'clean up subscriptions and pending requests in componentWillUnmount ' +\n- 'to prevent memory leaks.',\n+ await act(() => {\n+ root.render();\n+ });\n+ assertConsoleErrorDev(\n+ [\n+ 'Warning: MyComponent: isMounted is deprecated. Instead, make sure to ' +\n+ 'clean up subscriptions and pending requests in componentWillUnmount ' +\n+ 'to prevent memory leaks.\\n' +\n+ ' in MyComponent (at **)',\n+ ],\n \/\/ This now has a component stack even though it's part of a third-party library.\n );\n \ndiff --git a\/scripts\/jest\/spec-equivalence-reporter\/setupTests.js b\/scripts\/jest\/spec-equivalence-reporter\/setupTests.js\nindex 487e0d3003..c3eaf5690a 100644\n--- a\/scripts\/jest\/spec-equivalence-reporter\/setupTests.js\n+++ b\/scripts\/jest\/spec-equivalence-reporter\/setupTests.js\n@@ -7,6 +7,11 @@\n \n 'use strict';\n \n+const {\n+ patchConsoleMethods,\n+ resetAllUnexpectedConsoleCalls,\n+ flushAllUnexpectedConsoleCalls,\n+} = require('internal-test-utils\/consoleMock');\n const spyOn = jest.spyOn;\n \n \/\/ Spying on console methods in production builds can mask errors.\n@@ -36,6 +41,11 @@ global.spyOnProd = function (...args) {\n }\n };\n \n+\/\/ Patch the console to assert that all console error\/warn\/log calls assert.\n+patchConsoleMethods({includeLog: !!process.env.CI});\n+beforeEach(resetAllUnexpectedConsoleCalls);\n+afterEach(flushAllUnexpectedConsoleCalls);\n+\n expect.extend({\n ...require('..\/matchers\/reactTestMatchers'),\n ...require('..\/matchers\/toThrow'),\n"}

dillon1000/react

Files changed