Include Modes in the component stack (#13240)

* Add a test that StrictMode shows up in the component stack

The SSR test passes. The client one doesn't.

* Include Modes in component stack

* Update other tests to include modes

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');
   });

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);

packages/react/src/__tests__/ReactStrictMode-test.internal.js

@@ -357,6 +357,7 @@ describe('ReactStrictMode', () => {
         rendered = ReactTestRenderer.create(<SyncRoot />);
       }).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(<SyncRoot />)),
       ).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(<SyncRoot />)),
       ).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(<AsyncRoot foo={true} />);
       }).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(<AsyncRoot foo={false} />)).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(<SyncRoot />)).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(<Root />);
       }).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, ' +

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 <div ariaTypo="" />;
+    }
+
+    const container = document.createElement('div');
+    expect(() => {
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        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 <div ariaTypo="" />;
+    }
+
+    expect(() => {
+      ReactDOMServer.renderToString(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+      );
+    }).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 **)',
+    );
+  });
+});