Warn early for non-functional event listeners

src/renderers/__tests__/EventPluginHub-test.js

@@ -16,14 +16,18 @@ jest.mock('isEventSupported');
 describe('EventPluginHub', () => {
  var React;
  var ReactTestUtils;
+ var ReactDOMFeatureFlags;
 
  beforeEach(() => {
  jest.resetModules();
  React = require('react');
  ReactTestUtils = require('react-dom/test-utils');
+ ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
  });
 
  it('should prevent non-function listeners, at dispatch', () => {
+ // ReactDOMFiberComponent warns for non-function event listeners
+ spyOn(console, 'error');
  var node = ReactTestUtils.renderIntoDocument(
  <div onClick="not a function" />,
  );
@@ -32,6 +36,14 @@ describe('EventPluginHub', () => {
  }).toThrowError(
  'Expected onClick listener to be a function, instead got type string',
  );
+ if (ReactDOMFeatureFlags.useFiber) {
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Expected onClick listener to be a function, instead got type string',
+ );
+ } else {
+ expectDev(console.error.calls.count()).toBe(0);
+ }
  });
 
  it('should not prevent null listeners, at dispatch', () => {

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -34,6 +34,7 @@ var setTextContent = require('setTextContent');
 
 if (__DEV__) {
  var warning = require('fbjs/lib/warning');
+ var {getCurrentFiberStackAddendum} = require('ReactDebugCurrentFiber');
  var ReactDOMInvalidARIAHook = require('ReactDOMInvalidARIAHook');
  var ReactDOMNullInputValuePropHook = require('ReactDOMNullInputValuePropHook');
  var ReactDOMUnknownPropertyHook = require('ReactDOMUnknownPropertyHook');
@@ -122,6 +123,16 @@ if (__DEV__) {
  warning(false, 'Extra attributes from the server: %s', names);
  };
 
+ var warnForInvalidEventListener = function(registrationName, listener) {
+ warning(
+ false,
+ 'Expected %s listener to be a function, instead got type %s%s',
+ registrationName,
+ typeof listener,
+ getCurrentFiberStackAddendum(),
+ );
+ };
+
  var testDocument;
  // Parse the HTML and read it back to normalize the HTML string so that it
  // can be used for comparison.
@@ -227,6 +238,9 @@ function setInitialDOMProperties(
  // Noop
  } else if (registrationNameModules.hasOwnProperty(propKey)) {
  if (nextProp) {
+ if (__DEV__ && typeof nextProp !== 'function') {
+ warnForInvalidEventListener(propKey, nextProp);
+ }
  ensureListeningTo(rootContainerElement, propKey);
  }
  } else if (isCustomComponentTag) {
@@ -740,6 +754,9 @@ var ReactDOMFiberComponent = {
  } else if (registrationNameModules.hasOwnProperty(propKey)) {
  if (nextProp) {
  // We eagerly listen to this even though we haven't committed yet.
+ if (__DEV__ && typeof nextProp !== 'function') {
+ warnForInvalidEventListener(propKey, nextProp);
+ }
  ensureListeningTo(rootContainerElement, propKey);
  }
  if (!updatePayload && lastProp !== nextProp) {
@@ -980,6 +997,9 @@ var ReactDOMFiberComponent = {
  }
  }
  } else if (registrationNameModules.hasOwnProperty(propKey)) {
+ if (__DEV__ && typeof nextProp !== 'function') {
+ warnForInvalidEventListener(propKey, nextProp);
+ }
  if (nextProp) {
  ensureListeningTo(rootContainerElement, propKey);
  }

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -18,6 +18,10 @@ var ReactTestUtils = require('react-dom/test-utils');
 var PropTypes = require('prop-types');
 
 describe('ReactDOMFiber', () => {
+ function normalizeCodeLocInfo(str) {
+ return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
+ }
+
  var container;
  var ReactFeatureFlags;
 
@@ -913,6 +917,24 @@ describe('ReactDOMFiber', () => {
  ]);
  });
 
+ it.only('should warn for non-functional event listeners', () => {
+ spyOn(console, 'error');
+ class Example extends React.Component {
+ render() {
+ return <div onClick="woops" />;
+ }
+ }
+ ReactDOM.render(<Example />, container);
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(
+ normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
+ ).toContain(
+ 'Expected onClick listener to be a function, instead got type string\n' +
+ ' in div (at **)\n' +
+ ' in Example (at **)',
+ );
+ });
+
  it('should not update event handlers until commit', () => {
  let ops = [];
  const handlerA = () => ops.push('A');

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -1653,8 +1653,8 @@ describe('ReactDOMComponent', () => {
  ReactTestUtils.renderIntoDocument(
  <div className="foo1">
  <div class="foo2" />
- <div onClick="foo3" />
- <div onclick="foo4" />
+ <div onClick={() => {}} />
+ <div onclick={() => {}} />
  <div className="foo5" />
  <div className="foo6" />
  </div>,