Warn about unsafe toWarnDev() nesting in tests (facebook#12457)

* Add lint run to warn about improperly nested toWarnDev matchers
* Updated tests to avoid invalid nesting

Author: bvaughn

.eslintrc.js

@@ -65,6 +65,7 @@ module.exports = {
     // CUSTOM RULES
     // the second argument of warning/invariant should be a literal string
     'react-internal/no-primitive-constructors': ERROR,
+    'react-internal/no-to-warn-dev-within-to-throw': ERROR,
     'react-internal/warning-and-invariant-args': ERROR,
   },
 

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

@@ -428,12 +428,13 @@ describe('ReactCompositeComponent', () => {
     expect(() => {
       expect(() => {
         ReactDOM.render(<ClassWithRenderNotExtended />, container);
-      }).toWarnDev(
-        'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
-          "but doesn't extend React.Component. This is likely to cause errors. " +
-          'Change ClassWithRenderNotExtended to extend React.Component instead.',
-      );
-    }).toThrow(TypeError);
+      }).toThrow(TypeError);
+    }).toWarnDev(
+      'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
+        "but doesn't extend React.Component. This is likely to cause errors. " +
+        'Change ClassWithRenderNotExtended to extend React.Component instead.',
+      {withoutStack: true},
+    );
 
     // Test deduplication
     expect(() => {
@@ -1728,11 +1729,18 @@ describe('ReactCompositeComponent', () => {
     expect(() => {
       expect(() => {
         ReactTestUtils.renderIntoDocument(<RenderTextInvalidConstructor />);
-      }).toWarnDev(
+      }).toThrow();
+    }).toWarnDev(
+      [
+        // Expect two errors because invokeGuardedCallback will dispatch an error event,
+        // Causing the warning to be logged again.
         'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +
           'did you accidentally return an object from the constructor?',
-      );
-    }).toThrow();
+        'Warning: RenderTextInvalidConstructor(...): No `render` method found on the returned component instance: ' +
+          'did you accidentally return an object from the constructor?',
+      ],
+      {withoutStack: true},
+    );
   });
 
   it('should return error if render is not defined', () => {
@@ -1741,10 +1749,17 @@ describe('ReactCompositeComponent', () => {
     expect(() => {
       expect(() => {
         ReactTestUtils.renderIntoDocument(<RenderTestUndefinedRender />);
-      }).toWarnDev(
+      }).toThrow();
+    }).toWarnDev(
+      [
+        // Expect two errors because invokeGuardedCallback will dispatch an error event,
+        // Causing the warning to be logged again.
         'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +
           'component instance: you may have forgotten to define `render`.',
-      );
-    }).toThrow();
+        'Warning: RenderTestUndefinedRender(...): No `render` method found on the returned ' +
+          'component instance: you may have forgotten to define `render`.',
+      ],
+      {withoutStack: true},
+    );
   });
 });

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

@@ -359,10 +359,10 @@ describe('ReactDOMTextarea', () => {
             {'there'}
           </textarea>,
         ),
-      ).toWarnDev(
-        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-      );
-    }).toThrow();
+      ).toThrow('<textarea> can only have at most one child');
+    }).toWarnDev(
+      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+    );
 
     let node;
     expect(() => {
@@ -373,10 +373,10 @@ describe('ReactDOMTextarea', () => {
               <strong />
             </textarea>,
           )),
-      ).toWarnDev(
-        'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
-      );
-    }).not.toThrow();
+      ).not.toThrow();
+    }).toWarnDev(
+      'Use the `defaultValue` or `value` props instead of setting children on <textarea>.',
+    );
 
     expect(node.value).toBe('[object Object]');
   });

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

@@ -646,12 +646,13 @@ describe('ReactDOMServer', () => {
     expect(() => {
       expect(() =>
         ReactDOMServer.renderToString(<ClassWithRenderNotExtended />),
-      ).toWarnDev(
-        'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
-          "but doesn't extend React.Component. This is likely to cause errors. " +
-          'Change ClassWithRenderNotExtended to extend React.Component instead.',
-      );
-    }).toThrow(TypeError);
+      ).toThrow(TypeError);
+    }).toWarnDev(
+      'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
+        "but doesn't extend React.Component. This is likely to cause errors. " +
+        'Change ClassWithRenderNotExtended to extend React.Component instead.',
+      {withoutStack: true},
+    );
 
     // Test deduplication
     expect(() => {

scripts/eslint-rules/__tests__/no-to-warn-dev-within-to-throw-test.internal.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const rule = require('../no-to-warn-dev-within-to-throw');
+const RuleTester = require('eslint').RuleTester;
+const ruleTester = new RuleTester();
+
+ruleTester.run('eslint-rules/no-to-warn-dev-within-to-throw', rule, {
+  valid: [
+    'expect(callback).toWarnDev("warning");',
+    'expect(function() { expect(callback).toThrow("error") }).toWarnDev("warning");',
+  ],
+  invalid: [
+    {
+      code:
+        'expect(function() { expect(callback).toWarnDev("warning") }).toThrow("error");',
+      errors: [
+        {
+          message: 'toWarnDev() matcher should not be nested',
+        },
+      ],
+    },
+  ],
+});

scripts/eslint-rules/index.js

@@ -3,6 +3,7 @@
 module.exports = {
   rules: {
     'no-primitive-constructors': require('./no-primitive-constructors'),
+    'no-to-warn-dev-within-to-throw': require('./no-to-warn-dev-within-to-throw'),
     'warning-and-invariant-args': require('./warning-and-invariant-args'),
   },
 };

scripts/eslint-rules/no-to-warn-dev-within-to-throw.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+module.exports = function(context) {
+  return {
+    Identifier(node) {
+      if (node.name === 'toWarnDev') {
+        let current = node;
+        while (current.parent) {
+          if (current.type === 'CallExpression') {
+            if (
+              current &&
+              current.callee &&
+              current.callee.property &&
+              current.callee.property.name === 'toThrow'
+            ) {
+              context.report(node, 'toWarnDev() matcher should not be nested');
+            }
+          }
+          current = current.parent;
+        }
+      }
+    },
+  };
+};