Add hooks into the warning output for unit tests and other use cases

I’d like to configure my testsuite to fail if there are any react warnings triggered.

I’m currently using a variant on this SO answer http://stackoverflow.com/questions/29651950/karma-and-react-have-warnings-to-cause-errors

console.warn = (function(warn) {
  return function(msg) {

    // Detect react warnings & error
    if (/^Warning: /.test(msg)) {
      throw new Error("React " + msg);
    }

    return warn.apply(this, arguments);
  };
})(console.warn);

This basically works, but has a problem because there’s some global-state memoisation in the code which triggers warning to try not to trigger too often: https://github.com/facebook/react/blob/500d4c3f8779bce7c7dde129eb2fec9e901cf5ae/src/isomorphic/classic/element/ReactElementValidator.js#L46

Could we provide a way to clear this state, or even better a supported API for opt-in erroring on warnings?

[gaearon]

Never mind my last comment, it’s wrong. checkPropTypes() doesn’t return the failures (and it also deduplicates them). Maybe we should expose something there that doesn’t.

[bvaughn]

I realize I’m replying to a comment that’s over a year old, but… 😄

Does anybody know of a workaround to get the --watch scenario mentioned by @scottnonnenberg working? Unfortunately @gaearon’s workaround is not applicable as the warnings are still only triggered once.

I just did a quick test (below) and Dan’s hack-around does still seem to work so far as I can see, although I realize it’s far from ideal. For example:

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';

const CustomComponent = () => null;
CustomComponent.propTypes = {
  requiredBool: PropTypes.bool.isRequired
};

let counter = 0;

beforeEach(() => {
  CustomComponent.displayName = `CustomComponent-${++counter}`
})

it('test 1', () => {
  const div = document.createElement('div');
  ReactDOM.render(<CustomComponent />, div);
});

it('test 2', () => {
  const div = document.createElement('div');
  ReactDOM.render(<CustomComponent />, div);
});

The above test will result in the following warnings:

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Failed prop type: The prop `requiredBool` is marked as required in `CustomComponent-1`, but its value is `undefined`.
        in CustomComponent-1 (at App.test.js:20)

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Failed prop type: The prop `requiredBool` is marked as required in `CustomComponent-2`, but its value is `undefined`.
        in CustomComponent-2 (at App.test.js:25)