Warn if context values differ, related to issue #2112

Author: jimfb

src/core/ReactCompositeComponent.js

@@ -597,16 +597,34 @@ var ReactCompositeComponentMixin = assign({},
    _warnIfContextsDiffer: function(ownerBasedContext, parentBasedContext) {
     var ownerKeys = Object.keys(ownerBasedContext).sort();
     var parentKeys = Object.keys(parentBasedContext).sort();
-    warning(
-      ownerKeys.length === parentKeys.length &&
-      ownerKeys.toString() === parentKeys.toString(),
-      'owner based context (keys: %s) does not equal parent based' +
-      ' context (keys: %s) while mounting %s' +
-      ' (see: http://fb.me/react-context-by-parent)',
-      Object.keys(ownerBasedContext),
-      Object.keys(parentBasedContext),
-      (this._instance.constructor.displayName || 'ReactCompositeComponent')
-    );
+    var displayName = this._instance.constructor.displayName || 'ReactCompositeComponent';
+    if (ownerKeys.length !== parentKeys.length ||
+        ownerKeys.toString() !== parentKeys.toString()) {
+      warning(
+        ownerKeys.length === parentKeys.length &&
+        ownerKeys.toString() === parentKeys.toString(),
+        'owner based context (keys: %s) does not equal parent based ' +
+        'context (keys: %s) while mounting %s ' +
+        '(see: http://fb.me/react-context-by-parent)',
+        Object.keys(ownerBasedContext),
+        Object.keys(parentBasedContext),
+        displayName
+      );
+    } else {
+      for (key in parentKeys) {
+        var key = parentKeys[key];
+        warning(
+          ownerBasedContext[key] === parentBasedContext[key],
+          'owner-based and parent-based contexts differ '  +
+          '(values: `%s` vs `%s`) for key (%s) while mounting %s ' +
+          '(see: http://fb.me/react-context-by-parent)',
+          ownerBasedContext[key],
+          parentBasedContext[key],
+          key,
+          displayName
+        );
+      }
+    }
   },
 
   /**

src/core/__tests__/ReactCompositeComponent-test.js

@@ -1009,7 +1009,7 @@ describe('ReactCompositeComponent', function() {
     reactComponentExpect(grandchildInstance).scalarContextEqual({foo: 'bar', depth: 1});
   });
 
-  it('warn if contexts differ', function() {
+  it('warn if context keys differ', function() {
     var Component = React.createClass({
       contextTypes: {
         foo: ReactPropTypes.string.isRequired
@@ -1033,6 +1033,47 @@ describe('ReactCompositeComponent', function() {
 
   });
 
+  it('warn if context values differ', function() {
+    var Parent = React.createClass({
+      childContextTypes: {
+        foo: ReactPropTypes.string
+      },
+
+      getChildContext: function() {
+        return {
+          foo: "bar"
+        };
+      },
+
+      render: function() {
+        return <div>{this.props.children}</div>;
+      }
+    });
+    var Component = React.createClass({
+      contextTypes: {
+        foo: ReactPropTypes.string.isRequired
+      },
+
+      render: function() {
+        return <div />;
+      }
+    });
+
+    var component = React.withContext({foo: 'noise'}, function() {
+      return <Component />
+    });
+
+    ReactTestUtils.renderIntoDocument(<Parent>{component}</Parent>);
+
+    expect(console.warn.mock.calls.length).toBe(2);
+    expect(console.warn.mock.calls[0][0]).toBe(
+      'Warning: owner-based and parent-based contexts differ ' +
+      '(values: `noise` vs `bar`) for key (foo) while mounting Component ' +
+      '(see: http://fb.me/react-context-by-parent)'
+    );
+
+  });
+
   it('should check context types', function() {
     var Component = React.createClass({
       contextTypes: {