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
Dan Abramov committed
Jul 19, 2018 at 22:11 UTC
3d3506d37d6a3b398e29696458f696e86ec5d576
4 files changed
+77
-1
packages/react-dom/src/__tests__/ReactServerRenderingHydration.js
-1
@@ -292,7 +292,6 @@ describe('ReactDOMServerHydration', () => {
292
293
expect(() => ReactDOM.hydrate(markup, element)).toWarnDev(
294
'Please update the following components to use componentDidMount instead: ComponentWithWarning',
295
- {withoutStack: true},
295
);
296
expect(element.textContent).toBe('Hi');
297
});
packages/react-reconciler/src/ReactCurrentFiber.js
+2
@@ -13,6 +13,7 @@ import {
13
FunctionalComponent,
14
ClassComponent,
15
HostComponent,
16
+ Mode,
17
} from 'shared/ReactTypeOfWork';
18
import describeComponentFrame from 'shared/describeComponentFrame';
19
import getComponentName from 'shared/getComponentName';
@@ -29,6 +30,7 @@ function describeFiber(fiber: Fiber): string {
30
case FunctionalComponent:
31
case ClassComponent:
32
case HostComponent:
33
+ case Mode:
34
const owner = fiber._debugOwner;
35
const source = fiber._debugSource;
36
const name = getComponentName(fiber.type);
packages/react/src/__tests__/ReactStrictMode-test.internal.js
+10
@@ -357,6 +357,7 @@ describe('ReactStrictMode', () => {
357
rendered = ReactTestRenderer.create(<SyncRoot />);
358
}).toWarnDev(
359
'Unsafe lifecycle methods were found within a strict-mode tree:' +
360
+ '\n in AsyncMode (at **)' +
361
'\n in SyncRoot (at **)' +
362
'\n\ncomponentWillMount: Please update the following components ' +
363
'to use componentDidMount instead: AsyncRoot' +
@@ -414,6 +415,7 @@ describe('ReactStrictMode', () => {
415
() => (rendered = ReactTestRenderer.create(<SyncRoot />)),
416
).toWarnDev(
417
'Unsafe lifecycle methods were found within a strict-mode tree:' +
418
+ '\n in AsyncMode (at **)' +
419
'\n in SyncRoot (at **)' +
420
'\n\ncomponentWillMount: Please update the following components ' +
421
'to use componentDidMount instead: AsyncRoot, Parent' +
@@ -491,12 +493,14 @@ describe('ReactStrictMode', () => {
493
() => (rendered = ReactTestRenderer.create(<SyncRoot />)),
494
).toWarnDev([
495
'Unsafe lifecycle methods were found within a strict-mode tree:' +
496
+ '\n in AsyncMode (at **)' +
497
'\n in AsyncRootOne (at **)' +
498
'\n in div (at **)' +
499
'\n in SyncRoot (at **)' +
500
'\n\ncomponentWillMount: Please update the following components ' +
501
'to use componentDidMount instead: Bar, Foo',
502
'Unsafe lifecycle methods were found within a strict-mode tree:' +
503
+ '\n in AsyncMode (at **)' +
504
'\n in AsyncRootTwo (at **)' +
505
'\n in div (at **)' +
506
'\n in SyncRoot (at **)' +
@@ -537,6 +541,7 @@ describe('ReactStrictMode', () => {
541
rendered = ReactTestRenderer.create(<AsyncRoot foo={true} />);
542
}).toWarnDev(
543
'Unsafe lifecycle methods were found within a strict-mode tree:' +
544
+ '\n in AsyncMode (at **)' +
545
'\n in AsyncRoot (at **)' +
546
'\n\ncomponentWillMount: Please update the following components ' +
547
'to use componentDidMount instead: Foo' +
@@ -546,6 +551,7 @@ describe('ReactStrictMode', () => {
551
552
expect(() => rendered.update(<AsyncRoot foo={false} />)).toWarnDev(
553
'Unsafe lifecycle methods were found within a strict-mode tree:' +
554
+ '\n in AsyncMode (at **)' +
555
'\n in AsyncRoot (at **)' +
556
'\n\ncomponentWillMount: Please update the following components ' +
557
'to use componentDidMount instead: Bar' +
@@ -596,6 +602,7 @@ describe('ReactStrictMode', () => {
602
603
expect(() => ReactTestRenderer.create(<SyncRoot />)).toWarnDev(
604
'Unsafe lifecycle methods were found within a strict-mode tree:' +
605
+ '\n in StrictMode (at **)' +
606
'\n in SyncRoot (at **)' +
607
'\n\ncomponentWillReceiveProps: Please update the following components ' +
608
'to use static getDerivedStateFromProps instead: Bar, Foo' +
@@ -755,6 +762,7 @@ describe('ReactStrictMode', () => {
762
'Warning: A string ref, "somestring", has been found within a strict mode tree. ' +
763
'String refs are a source of potential bugs and should be avoided. ' +
764
'We recommend using createRef() instead.\n\n' +
765
+ ' in StrictMode (at **)\n' +
766
' in OuterComponent (at **)\n\n' +
767
'Learn more about using refs safely here:\n' +
768
'https://fb.me/react-strict-mode-string-ref',
@@ -797,6 +805,7 @@ describe('ReactStrictMode', () => {
805
'String refs are a source of potential bugs and should be avoided. ' +
806
'We recommend using createRef() instead.\n\n' +
807
' in InnerComponent (at **)\n' +
808
+ ' in StrictMode (at **)\n' +
809
' in OuterComponent (at **)\n\n' +
810
'Learn more about using refs safely here:\n' +
811
'https://fb.me/react-strict-mode-string-ref',
@@ -888,6 +897,7 @@ describe('ReactStrictMode', () => {
897
rendered = ReactTestRenderer.create(<Root />);
898
}).toWarnDev(
899
'Warning: Legacy context API has been detected within a strict-mode tree: ' +
900
+ '\n in StrictMode (at **)' +
901
'\n in div (at **)' +
902
'\n in Root (at **)' +
903
'\n\nPlease update the following components: FactoryLegacyContextConsumer, ' +
packages/react/src/__tests__/ReactStrictMode-test.js
new
+65
@@ -0,0 +1,65 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+let React;
13
+let ReactDOM;
14
+let ReactDOMServer;
15
+
16
+describe('ReactStrictMode', () => {
17
+ beforeEach(() => {
18
+ jest.resetModules();
19
+ React = require('react');
20
+ ReactDOM = require('react-dom');
21
+ ReactDOMServer = require('react-dom/server');
22
+ });
23
+
24
+ it('should appear in the client component stack', () => {
25
+ function Foo() {
26
+ return <div ariaTypo="" />;
27
+ }
28
+
29
+ const container = document.createElement('div');
30
+ expect(() => {
31
+ ReactDOM.render(
32
+ <React.StrictMode>
33
+ <Foo />
34
+ </React.StrictMode>,
35
+ container,
36
+ );
37
+ }).toWarnDev(
38
+ 'Invalid ARIA attribute `ariaTypo`. ' +
39
+ 'ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
40
+ ' in div (at **)\n' +
41
+ ' in Foo (at **)\n' +
42
+ ' in StrictMode (at **)',
43
+ );
44
+ });
45
+
46
+ it('should appear in the SSR component stack', () => {
47
+ function Foo() {
48
+ return <div ariaTypo="" />;
49
+ }
50
+
51
+ expect(() => {
52
+ ReactDOMServer.renderToString(
53
+ <React.StrictMode>
54
+ <Foo />
55
+ </React.StrictMode>,
56
+ );
57
+ }).toWarnDev(
58
+ 'Invalid ARIA attribute `ariaTypo`. ' +
59
+ 'ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
60
+ ' in div (at **)\n' +
61
+ ' in Foo (at **)\n' +
62
+ ' in StrictMode (at **)',
63
+ );
64
+ });
65
+});