Added unit tests for creating an element with a ref in a constructor. Only set ReactCurrentOwner.current in dev mode when the component has no constructor. (#10025)
Ian Sutherland committed
Aug 15, 2017 at 03:21 UTC
7f6b9409195a280ef3e30ad4cbeb9fa5a18d5cdd
3 files changed
+74
-1
scripts/fiber/tests-passing.txt
+2
@@ -626,6 +626,8 @@ src/renderers/__tests__/refs-test.js
626
* attaches, detaches from fiber component with stack layer
627
* attaches, detaches from stack component with fiber layer
628
* attaches and detaches root refs
629
+* throws an error when __DEV__ = true
630
+* throws an error when __DEV__ = false
631
632
src/renderers/art/__tests__/ReactART-test.js
633
* should have the correct lifecycle state
src/renderers/__tests__/refs-test.js
+71
@@ -476,3 +476,74 @@ describe('root level refs', () => {
476
}
477
});
478
});
479
+
480
+describe('creating element with ref in constructor', () => {
481
+ class RefTest extends React.Component {
482
+ constructor(props) {
483
+ super(props);
484
+ this.p = <p ref="p">Hello!</p>;
485
+ }
486
+
487
+ render() {
488
+ return <div>{this.p}</div>;
489
+ }
490
+ }
491
+
492
+ var devErrorMessage =
493
+ 'addComponentAsRefTo(...): Only a ReactOwner can have refs. You might ' +
494
+ "be adding a ref to a component that was not created inside a component's " +
495
+ '`render` method, or you have multiple copies of React loaded ' +
496
+ '(details: https://fb.me/react-refs-must-have-owner).';
497
+
498
+ var prodErrorMessage =
499
+ 'Minified React error #119; visit ' +
500
+ 'http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message ' +
501
+ 'or use the non-minified dev environment for full errors and additional helpful warnings.';
502
+
503
+ var fiberDevErrorMessage =
504
+ 'Element ref was specified as a string (p) but no owner was ' +
505
+ 'set. You may have multiple copies of React loaded. ' +
506
+ '(details: https://fb.me/react-refs-must-have-owner).';
507
+
508
+ var fiberProdErrorMessage =
509
+ 'Minified React error #149; visit ' +
510
+ 'http://facebook.github.io/react/docs/error-decoder.html?invariant=149&args[]=p ' +
511
+ 'for the full message or use the non-minified dev environment for full errors and additional ' +
512
+ 'helpful warnings.';
513
+
514
+ it('throws an error when __DEV__ = true', () => {
515
+ ReactTestUtils = require('react-dom/test-utils');
516
+
517
+ var originalDev = __DEV__;
518
+ __DEV__ = true;
519
+
520
+ try {
521
+ expect(function() {
522
+ ReactTestUtils.renderIntoDocument(<RefTest />);
523
+ }).toThrowError(
524
+ ReactDOMFeatureFlags.useFiber ? fiberDevErrorMessage : devErrorMessage,
525
+ );
526
+ } finally {
527
+ __DEV__ = originalDev;
528
+ }
529
+ });
530
+
531
+ it('throws an error when __DEV__ = false', () => {
532
+ ReactTestUtils = require('react-dom/test-utils');
533
+
534
+ var originalDev = __DEV__;
535
+ __DEV__ = false;
536
+
537
+ try {
538
+ expect(function() {
539
+ ReactTestUtils.renderIntoDocument(<RefTest />);
540
+ }).toThrowError(
541
+ ReactDOMFeatureFlags.useFiber
542
+ ? fiberProdErrorMessage
543
+ : prodErrorMessage,
544
+ );
545
+ } finally {
546
+ __DEV__ = originalDev;
547
+ }
548
+ });
549
+});
src/renderers/shared/stack/reconciler/ReactCompositeComponent.js
+1
-1
@@ -402,7 +402,7 @@ var ReactCompositeComponent = {
402
publicContext,
403
updateQueue,
404
) {
405
- if (__DEV__) {
405
+ if (__DEV__ && !doConstruct) {
406
ReactCurrentOwner.current = this;
407
ReactDebugCurrentFrame.getCurrentStack =
408
ReactDebugCurrentStack.getStackAddendum;