toWarnInDev matcher; throw on unexpected console.error

packages/react-art/src/__tests__/ReactART-test.js

@@ -336,10 +336,6 @@ describe('ReactART', () => {
 });
 
 describe('ReactARTComponents', () => {
-  function normalizeCodeLocInfo(str) {
-    return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
-  }
-
   it('should generate a <Shape> with props for drawing the Circle', () => {
     const circle = renderer.create(
       <Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
@@ -348,16 +344,13 @@ describe('ReactARTComponents', () => {
   });
 
   it('should warn if radius is missing on a Circle component', () => {
-    spyOnDev(console, 'error');
-    renderer.create(<Circle stroke="green" strokeWidth={3} fill="blue" />);
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(1);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: Failed prop type: The prop `radius` is marked as required in `Circle`, ' +
-          'but its value is `undefined`.' +
-          '\n    in Circle (at **)',
-      );
-    }
+    expect(() =>
+      renderer.create(<Circle stroke="green" strokeWidth={3} fill="blue" />),
+    ).toWarnDev(
+      'Warning: Failed prop type: The prop `radius` is marked as required in `Circle`, ' +
+        'but its value is `undefined`.' +
+        '\n    in Circle (at **)',
+    );
   });
 
   it('should generate a <Shape> with props for drawing the Rectangle', () => {
@@ -368,21 +361,16 @@ describe('ReactARTComponents', () => {
   });
 
   it('should warn if width/height is missing on a Rectangle component', () => {
-    spyOnDev(console, 'error');
-    renderer.create(<Rectangle stroke="green" fill="blue" />);
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(2);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: Failed prop type: The prop `width` is marked as required in `Rectangle`, ' +
-          'but its value is `undefined`.' +
-          '\n    in Rectangle (at **)',
-      );
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
-        'Warning: Failed prop type: The prop `height` is marked as required in `Rectangle`, ' +
-          'but its value is `undefined`.' +
-          '\n    in Rectangle (at **)',
-      );
-    }
+    expect(() =>
+      renderer.create(<Rectangle stroke="green" fill="blue" />),
+    ).toWarnDev([
+      'Warning: Failed prop type: The prop `width` is marked as required in `Rectangle`, ' +
+        'but its value is `undefined`.' +
+        '\n    in Rectangle (at **)',
+      'Warning: Failed prop type: The prop `height` is marked as required in `Rectangle`, ' +
+        'but its value is `undefined`.' +
+        '\n    in Rectangle (at **)',
+    ]);
   });
 
   it('should generate a <Shape> with props for drawing the Wedge', () => {
@@ -400,25 +388,16 @@ describe('ReactARTComponents', () => {
   });
 
   it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => {
-    spyOnDev(console, 'error');
-    renderer.create(<Wedge fill="blue" />);
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(3);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: Failed prop type: The prop `outerRadius` is marked as required in `Wedge`, ' +
-          'but its value is `undefined`.' +
-          '\n    in Wedge (at **)',
-      );
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
-        'Warning: Failed prop type: The prop `startAngle` is marked as required in `Wedge`, ' +
-          'but its value is `undefined`.' +
-          '\n    in Wedge (at **)',
-      );
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(2)[0])).toEqual(
-        'Warning: Failed prop type: The prop `endAngle` is marked as required in `Wedge`, ' +
-          'but its value is `undefined`.' +
-          '\n    in Wedge (at **)',
-      );
-    }
+    expect(() => renderer.create(<Wedge fill="blue" />)).toWarnDev([
+      'Warning: Failed prop type: The prop `outerRadius` is marked as required in `Wedge`, ' +
+        'but its value is `undefined`.' +
+        '\n    in Wedge (at **)',
+      'Warning: Failed prop type: The prop `startAngle` is marked as required in `Wedge`, ' +
+        'but its value is `undefined`.' +
+        '\n    in Wedge (at **)',
+      'Warning: Failed prop type: The prop `endAngle` is marked as required in `Wedge`, ' +
+        'but its value is `undefined`.' +
+        '\n    in Wedge (at **)',
+    ]);
   });
 });

packages/react-dom/src/__tests__/CSSPropertyOperations-test.js

@@ -13,10 +13,6 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const ReactDOMServer = require('react-dom/server');
 
-function normalizeCodeLocInfo(str) {
-  return str && str.replace(/at .+?:\d+/g, 'at **');
-}
-
 describe('CSSPropertyOperations', () => {
   it('should automatically append `px` to relevant styles', () => {
     const styles = {
@@ -91,17 +87,13 @@ describe('CSSPropertyOperations', () => {
       }
     }
 
-    spyOnDev(console, 'error');
     const root = document.createElement('div');
-    ReactDOM.render(<Comp />, root);
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(1);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: Unsupported style property background-color. Did you mean backgroundColor?' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-    }
+
+    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
+      'Warning: Unsupported style property background-color. Did you mean backgroundColor?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    );
   });
 
   it('should warn when updating hyphenated style names', () => {
@@ -113,28 +105,21 @@ describe('CSSPropertyOperations', () => {
       }
     }
 
-    spyOnDev(console, 'error');
     const styles = {
       '-ms-transform': 'translate3d(0, 0, 0)',
       '-webkit-transform': 'translate3d(0, 0, 0)',
     };
     const root = document.createElement('div');
     ReactDOM.render(<Comp />, root);
-    ReactDOM.render(<Comp style={styles} />, root);
-
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(2);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
-        'Warning: Unsupported style property -webkit-transform. Did you mean WebkitTransform?' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-    }
+
+    expect(() => ReactDOM.render(<Comp style={styles} />, root)).toWarnDev([
+      'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+      'Warning: Unsupported style property -webkit-transform. Did you mean WebkitTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
   });
 
   it('warns when miscapitalizing vendored style names', () => {
@@ -154,25 +139,19 @@ describe('CSSPropertyOperations', () => {
       }
     }
 
-    spyOnDev(console, 'error');
     const root = document.createElement('div');
-    ReactDOM.render(<Comp />, root);
-    if (__DEV__) {
+
+    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev([
       // msTransform is correct already and shouldn't warn
-      expect(console.error.calls.count()).toBe(2);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: Unsupported vendor-prefixed style property oTransform. ' +
-          'Did you mean OTransform?' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
-        'Warning: Unsupported vendor-prefixed style property webkitTransform. ' +
-          'Did you mean WebkitTransform?' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-    }
+      'Warning: Unsupported vendor-prefixed style property oTransform. ' +
+        'Did you mean OTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+      'Warning: Unsupported vendor-prefixed style property webkitTransform. ' +
+        'Did you mean WebkitTransform?' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
   });
 
   it('should warn about style having a trailing semicolon', () => {
@@ -193,24 +172,18 @@ describe('CSSPropertyOperations', () => {
       }
     }
 
-    spyOnDev(console, 'error');
     const root = document.createElement('div');
-    ReactDOM.render(<Comp />, root);
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(2);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        "Warning: Style property values shouldn't contain a semicolon. " +
-          'Try "backgroundColor: blue" instead.' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
-        "Warning: Style property values shouldn't contain a semicolon. " +
-          'Try "color: red" instead.' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-    }
+
+    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev([
+      "Warning: Style property values shouldn't contain a semicolon. " +
+        'Try "backgroundColor: blue" instead.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+      "Warning: Style property values shouldn't contain a semicolon. " +
+        'Try "color: red" instead.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    ]);
   });
 
   it('should warn about style containing a NaN value', () => {
@@ -222,18 +195,13 @@ describe('CSSPropertyOperations', () => {
       }
     }
 
-    spyOnDev(console, 'error');
     const root = document.createElement('div');
-    ReactDOM.render(<Comp />, root);
 
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(1);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-    }
+    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
+      'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    );
   });
 
   it('should not warn when setting CSS custom properties', () => {
@@ -256,18 +224,13 @@ describe('CSSPropertyOperations', () => {
       }
     }
 
-    spyOnDev(console, 'error');
     const root = document.createElement('div');
-    ReactDOM.render(<Comp />, root);
 
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(1);
-      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
-        'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
-          '\n    in div (at **)' +
-          '\n    in Comp (at **)',
-      );
-    }
+    expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
+      'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
+        '\n    in div (at **)' +
+        '\n    in Comp (at **)',
+    );
   });
 
   it('should not add units to CSS custom properties', () => {

packages/react-dom/src/__tests__/DOMPropertyOperations-test.js

@@ -151,25 +151,22 @@ describe('DOMPropertyOperations', () => {
 
     it('should not remove attributes for special properties', () => {
       const container = document.createElement('div');
-      spyOnDev(console, 'error');
       ReactDOM.render(
         <input type="text" value="foo" onChange={function() {}} />,
         container,
       );
       expect(container.firstChild.getAttribute('value')).toBe('foo');
       expect(container.firstChild.value).toBe('foo');
-      ReactDOM.render(
-        <input type="text" onChange={function() {}} />,
-        container,
+      expect(() =>
+        ReactDOM.render(
+          <input type="text" onChange={function() {}} />,
+          container,
+        ),
+      ).toWarnDev(
+        'A component is changing a controlled input of type text to be uncontrolled',
       );
       expect(container.firstChild.getAttribute('value')).toBe('foo');
       expect(container.firstChild.value).toBe('foo');
-      if (__DEV__) {
-        expect(console.error.calls.count()).toBe(1);
-        expect(console.error.calls.argsFor(0)[0]).toContain(
-          'A component is changing a controlled input of type text to be uncontrolled',
-        );
-      }
     });
   });
 });

packages/react-dom/src/__tests__/EventPluginHub-test.js

@@ -22,21 +22,17 @@ describe('EventPluginHub', () => {
   });
 
   it('should prevent non-function listeners, at dispatch', () => {
-    spyOnDev(console, 'error');
-    const node = ReactTestUtils.renderIntoDocument(
-      <div onClick="not a function" />,
+    let node;
+    expect(() => {
+      node = ReactTestUtils.renderIntoDocument(
+        <div onClick="not a function" />,
+      );
+    }).toWarnDev(
+      'Expected `onClick` listener to be a function, instead got a value of `string` type.',
     );
-    expect(function() {
-      ReactTestUtils.SimulateNative.click(node);
-    }).toThrowError(
+    expect(() => ReactTestUtils.SimulateNative.click(node)).toThrowError(
       'Expected `onClick` listener to be a function, instead got a value of `string` type.',
     );
-    if (__DEV__) {
-      expect(console.error.calls.count()).toBe(1);
-      expect(console.error.calls.argsFor(0)[0]).toContain(
-        'Expected `onClick` listener to be a function, instead got a value of `string` type.',
-      );
-    }
   });
 
   it('should not prevent null listeners, at dispatch', () => {