Use compositeType in warning invariant for refs (#7658)

facebook · Sep 6, 2016 · 06ea71d · 06ea71d
1 parent 6a525fd
commit 06ea71d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js b/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js
@@ -1107,7 +1107,9 @@ var ReactCompositeComponent = {
     if (__DEV__) {
       var componentName = component && component.getName ?
         component.getName() : 'a component';
-      warning(publicComponentInstance != null,
+      warning(
+        publicComponentInstance != null ||
+        component._compositeType !== CompositeTypes.StatelessFunctional,
         'Stateless function components cannot be given refs ' +
         '(See ref "%s" in %s created by %s). ' +
         'Attempts to access this ref will fail.',

diff --git a/src/renderers/testing/__tests__/ReactTestRenderer-test.js b/src/renderers/testing/__tests__/ReactTestRenderer-test.js
@@ -206,6 +206,31 @@ describe('ReactTestRenderer', function() {
     expect(log).toEqual([null]);
   });
 
+  it('warns correctly for refs on SFCs', function() {
+    spyOn(console, 'error');
+    function Bar() {
+      return <div>Hello, world</div>
+    }
+    class Foo extends React.Component {
+      render() {
+        return <Bar ref="foo" />
+      }
+    }
+    class Baz extends React.Component {
+      render() {
+        return <div ref="baz" />
+      }
+    }
+    ReactTestRenderer.create(<Baz />);
+    ReactTestRenderer.create(<Foo />);
+    expect(console.error.calls.count()).toBe(1);
+    expect(console.error.calls.argsFor(0)[0]).toContain(
+      'Stateless function components cannot be given refs ' +
+      '(See ref "foo" in Bar created by Foo). ' +
+      'Attempts to access this ref will fail.'
+    );
+  });
+
   it('supports error boundaries', function() {
     var log = [];
     class Angry extends React.Component {