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)

nhunzaker: I've added an additional line to the ref test that sets the
NODE_ENV invironment variable. This allows the test to pass.
This commit is contained in:
Ian Sutherland
2017-09-25 17:02:43 -07:00
committed by Sophie Alpert
parent 8af9dbf77c
commit 1347b4a9d9
2 changed files with 77 additions and 1 deletions
@@ -372,7 +372,7 @@ var ReactCompositeComponent = {
publicContext,
updateQueue,
) {
if (__DEV__) {
if (__DEV__ && !doConstruct) {
ReactCurrentOwner.current = this;
try {
return this._constructComponentWithoutOwner(
@@ -13,6 +13,7 @@
var React = require('React');
var ReactTestUtils = require('ReactTestUtils');
var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var reactComponentExpect = require('reactComponentExpect');
@@ -283,3 +284,78 @@ describe('ref swapping', () => {
__DEV__ = originalDev;
});
});
describe('creating element with ref in constructor', () => {
class RefTest extends React.Component {
constructor(props) {
super(props);
this.p = <p ref="p">Hello!</p>;
}
render() {
return <div>{this.p}</div>;
}
}
var devErrorMessage =
'addComponentAsRefTo(...): Only a ReactOwner can have refs. You might ' +
"be adding a ref to a component that was not created inside a component's " +
'`render` method, or you have multiple copies of React loaded ' +
'(details: https://fb.me/react-refs-must-have-owner).';
var prodErrorMessage =
'Minified React error #119; visit ' +
'http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message ' +
'or use the non-minified dev environment for full errors and additional helpful warnings.';
var fiberDevErrorMessage =
'Element ref was specified as a string (p) but no owner was ' +
'set. You may have multiple copies of React loaded. ' +
'(details: https://fb.me/react-refs-must-have-owner).';
var fiberProdErrorMessage =
'Minified React error #149; visit ' +
'http://facebook.github.io/react/docs/error-decoder.html?invariant=149&args[]=p ' +
'for the full message or use the non-minified dev environment for full errors and additional ' +
'helpful warnings.';
it('throws an error when __DEV__ = true', () => {
ReactTestUtils = require('ReactTestUtils');
var originalDev = __DEV__;
__DEV__ = true;
try {
expect(function() {
ReactTestUtils.renderIntoDocument(<RefTest />);
}).toThrowError(
ReactDOMFeatureFlags.useFiber ? fiberDevErrorMessage : devErrorMessage,
);
} finally {
__DEV__ = originalDev;
}
});
it('throws an error when __DEV__ = false', () => {
ReactTestUtils = require('ReactTestUtils');
var originalDev = __DEV__;
var originalEnv = process.env.NODE_ENV;
__DEV__ = false;
process.env.NODE_ENV = 'production';
try {
expect(function() {
ReactTestUtils.renderIntoDocument(<RefTest />);
}).toThrowError(
ReactDOMFeatureFlags.useFiber
? fiberProdErrorMessage
: prodErrorMessage,
);
} finally {
__DEV__ = originalDev;
process.env.NODE_ENV = originalEnv;
}
});
});