diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js index 9f15eab857a61..63a0104f0cc60 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js @@ -292,7 +292,6 @@ describe('ReactDOMServerHydration', () => { expect(() => ReactDOM.hydrate(markup, element)).toWarnDev( 'Please update the following components to use componentDidMount instead: ComponentWithWarning', - {withoutStack: true}, ); expect(element.textContent).toBe('Hi'); }); diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js index 0a47c6ba905d8..cd72ffc520958 100644 --- a/packages/react-reconciler/src/ReactCurrentFiber.js +++ b/packages/react-reconciler/src/ReactCurrentFiber.js @@ -13,6 +13,7 @@ import { FunctionalComponent, ClassComponent, HostComponent, + Mode, } from 'shared/ReactTypeOfWork'; import describeComponentFrame from 'shared/describeComponentFrame'; import getComponentName from 'shared/getComponentName'; @@ -29,6 +30,7 @@ function describeFiber(fiber: Fiber): string { case FunctionalComponent: case ClassComponent: case HostComponent: + case Mode: const owner = fiber._debugOwner; const source = fiber._debugSource; const name = getComponentName(fiber.type); diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js index 10c53cc9edf5c..fffb538571fb0 100644 --- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js +++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js @@ -357,6 +357,7 @@ describe('ReactStrictMode', () => { rendered = ReactTestRenderer.create(); }).toWarnDev( 'Unsafe lifecycle methods were found within a strict-mode tree:' + + '\n in AsyncMode (at **)' + '\n in SyncRoot (at **)' + '\n\ncomponentWillMount: Please update the following components ' + 'to use componentDidMount instead: AsyncRoot' + @@ -414,6 +415,7 @@ describe('ReactStrictMode', () => { () => (rendered = ReactTestRenderer.create()), ).toWarnDev( 'Unsafe lifecycle methods were found within a strict-mode tree:' + + '\n in AsyncMode (at **)' + '\n in SyncRoot (at **)' + '\n\ncomponentWillMount: Please update the following components ' + 'to use componentDidMount instead: AsyncRoot, Parent' + @@ -491,12 +493,14 @@ describe('ReactStrictMode', () => { () => (rendered = ReactTestRenderer.create()), ).toWarnDev([ 'Unsafe lifecycle methods were found within a strict-mode tree:' + + '\n in AsyncMode (at **)' + '\n in AsyncRootOne (at **)' + '\n in div (at **)' + '\n in SyncRoot (at **)' + '\n\ncomponentWillMount: Please update the following components ' + 'to use componentDidMount instead: Bar, Foo', 'Unsafe lifecycle methods were found within a strict-mode tree:' + + '\n in AsyncMode (at **)' + '\n in AsyncRootTwo (at **)' + '\n in div (at **)' + '\n in SyncRoot (at **)' + @@ -537,6 +541,7 @@ describe('ReactStrictMode', () => { rendered = ReactTestRenderer.create(); }).toWarnDev( 'Unsafe lifecycle methods were found within a strict-mode tree:' + + '\n in AsyncMode (at **)' + '\n in AsyncRoot (at **)' + '\n\ncomponentWillMount: Please update the following components ' + 'to use componentDidMount instead: Foo' + @@ -546,6 +551,7 @@ describe('ReactStrictMode', () => { expect(() => rendered.update()).toWarnDev( 'Unsafe lifecycle methods were found within a strict-mode tree:' + + '\n in AsyncMode (at **)' + '\n in AsyncRoot (at **)' + '\n\ncomponentWillMount: Please update the following components ' + 'to use componentDidMount instead: Bar' + @@ -596,6 +602,7 @@ describe('ReactStrictMode', () => { expect(() => ReactTestRenderer.create()).toWarnDev( 'Unsafe lifecycle methods were found within a strict-mode tree:' + + '\n in StrictMode (at **)' + '\n in SyncRoot (at **)' + '\n\ncomponentWillReceiveProps: Please update the following components ' + 'to use static getDerivedStateFromProps instead: Bar, Foo' + @@ -755,6 +762,7 @@ describe('ReactStrictMode', () => { 'Warning: A string ref, "somestring", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + 'We recommend using createRef() instead.\n\n' + + ' in StrictMode (at **)\n' + ' in OuterComponent (at **)\n\n' + 'Learn more about using refs safely here:\n' + 'https://fb.me/react-strict-mode-string-ref', @@ -797,6 +805,7 @@ describe('ReactStrictMode', () => { 'String refs are a source of potential bugs and should be avoided. ' + 'We recommend using createRef() instead.\n\n' + ' in InnerComponent (at **)\n' + + ' in StrictMode (at **)\n' + ' in OuterComponent (at **)\n\n' + 'Learn more about using refs safely here:\n' + 'https://fb.me/react-strict-mode-string-ref', @@ -888,6 +897,7 @@ describe('ReactStrictMode', () => { rendered = ReactTestRenderer.create(); }).toWarnDev( 'Warning: Legacy context API has been detected within a strict-mode tree: ' + + '\n in StrictMode (at **)' + '\n in div (at **)' + '\n in Root (at **)' + '\n\nPlease update the following components: FactoryLegacyContextConsumer, ' + diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js new file mode 100644 index 0000000000000..f4ba917432ec0 --- /dev/null +++ b/packages/react/src/__tests__/ReactStrictMode-test.js @@ -0,0 +1,65 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +let React; +let ReactDOM; +let ReactDOMServer; + +describe('ReactStrictMode', () => { + beforeEach(() => { + jest.resetModules(); + React = require('react'); + ReactDOM = require('react-dom'); + ReactDOMServer = require('react-dom/server'); + }); + + it('should appear in the client component stack', () => { + function Foo() { + return
; + } + + const container = document.createElement('div'); + expect(() => { + ReactDOM.render( + + + , + container, + ); + }).toWarnDev( + 'Invalid ARIA attribute `ariaTypo`. ' + + 'ARIA attributes follow the pattern aria-* and must be lowercase.\n' + + ' in div (at **)\n' + + ' in Foo (at **)\n' + + ' in StrictMode (at **)', + ); + }); + + it('should appear in the SSR component stack', () => { + function Foo() { + return
; + } + + expect(() => { + ReactDOMServer.renderToString( + + + , + ); + }).toWarnDev( + 'Invalid ARIA attribute `ariaTypo`. ' + + 'ARIA attributes follow the pattern aria-* and must be lowercase.\n' + + ' in div (at **)\n' + + ' in Foo (at **)\n' + + ' in StrictMode (at **)', + ); + }); +});