Flow upgrade (#4355)

* Update to flow 0.52

* Update to flow 0.53

* Suppress flow errors from facebook/flow#4658

* Remove redundant `$FlowFixMe`s

* Add new workaround for `React.createElement(undefined)`

.flowconfig

@@ -13,4 +13,4 @@ module.name_mapper='^types/\(.*\)$' -> '<PROJECT_ROOT>/types/\1.js'
 module.name_mapper='\(jest-[^/]*\)' -> '<PROJECT_ROOT>/packages/\1/src/index.js'
 
 [version]
-^0.50.0
+^0.53.1

examples/react-native/Intro.js

@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export default class Intro extends Component {
+export default class Intro extends Component<{}> {
   render() {
     return (
       <View style={styles.container}>

examples/react-native/index.android.js

@@ -8,7 +8,7 @@ import Intro from './Intro';
 import React, {AppRegistry} from 'react-native';
 import {Component} from 'react';
 
-class App extends Component {
+class App extends Component<{}> {
   render() {
     return <Intro />;
   }

examples/react-native/index.ios.js

@@ -8,7 +8,7 @@ import Intro from './Intro';
 import React, {Component} from 'react';
 import {AppRegistry} from 'react-native';
 
-class App extends Component {
+class App extends Component<{}> {
   render() {
     return <Intro />;
   }

package.json

@@ -36,7 +36,7 @@
     "eslint-plugin-react": "^7.1.0",
     "eslint-plugin-relay": "0.0.8",
     "eslint-plugin-unicorn": "^2.1.2",
-    "flow-bin": "^0.50.0",
+    "flow-bin": "^0.53.1",
     "glob": "^7.1.1",
     "graceful-fs": "^4.1.11",
     "immutable": "^4.0.0-rc.1",

packages/jest-repl/src/cli/repl.js

@@ -33,6 +33,7 @@ const evalCommand = (cmd, context, filename, callback, config) => {
     }
     result = vm.runInThisContext(cmd);
   } catch (e) {
+    // $FlowFixMe: https://github.com/facebook/flow/pull/4713
     return callback(isRecoverableError(e) ? new repl.Recoverable(e) : e);
   }
   return callback(null, result);
@@ -76,6 +77,7 @@ const replInstance = repl.start({
   useGlobal: true,
 });
 
+// $FlowFixMe: https://github.com/facebook/flow/pull/4713
 replInstance.context.require = moduleName => {
   if (/(\/|\\|\.)/.test(moduleName)) {
     moduleName = path.resolve(process.cwd(), moduleName);

packages/pretty-format/src/__tests__/immutable.test.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import React from 'react';
+import * as React from 'react';
 import Immutable from 'immutable';
 import prettyFormat from '../';
 const {Immutable: ImmutablePlugin, ReactElement} = prettyFormat.plugins;
@@ -98,6 +98,7 @@ describe('Immutable.OrderedSet', () => {
   });
 
   it('supports React elements {min: true}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.OrderedSet([reactElement, reactElement]),
@@ -107,6 +108,7 @@ describe('Immutable.OrderedSet', () => {
   });
 
   it('supports React elements {min: false}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.OrderedSet([reactElement, reactElement]),
@@ -181,6 +183,7 @@ describe('Immutable.List', () => {
   });
 
   it('supports React elements {min: true}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.List([reactElement, reactElement]),
@@ -191,6 +194,7 @@ describe('Immutable.List', () => {
   });
 
   it('supports React elements {min: false}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(Immutable.List([reactElement, reactElement])).toPrettyPrintTo(
       'Immutable.List [\n  <Mouse>\n    Hello World\n  </Mouse>,\n  <Mouse>\n    Hello World\n  </Mouse>,\n]',
@@ -264,6 +268,7 @@ describe('Immutable.Stack', () => {
   });
 
   it('supports React elements {min: true}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.Stack([reactElement, reactElement]),
@@ -274,6 +279,7 @@ describe('Immutable.Stack', () => {
   });
 
   it('supports React elements {min: false}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(Immutable.Stack([reactElement, reactElement])).toPrettyPrintTo(
       'Immutable.Stack [\n  <Mouse>\n    Hello World\n  </Mouse>,\n  <Mouse>\n    Hello World\n  </Mouse>,\n]',
@@ -343,6 +349,7 @@ describe('Immutable.Set', () => {
   });
 
   it('supports React elements {min: true}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.Set([reactElement, reactElement]),
@@ -352,6 +359,7 @@ describe('Immutable.Set', () => {
   });
 
   it('supports React elements {min: false}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(Immutable.Set([reactElement, reactElement])).toPrettyPrintTo(
       'Immutable.Set [\n  <Mouse>\n    Hello World\n  </Mouse>,\n]',
@@ -403,6 +411,7 @@ describe('Immutable.Map', () => {
   });
 
   it('supports React elements {min: true}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.Map({a: reactElement, b: reactElement}),
@@ -413,6 +422,7 @@ describe('Immutable.Map', () => {
   });
 
   it('supports React elements {min: false}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(Immutable.Map({a: reactElement, b: reactElement})).toPrettyPrintTo(
       'Immutable.Map {\n  "a": <Mouse>\n    Hello World\n  </Mouse>,\n  "b": <Mouse>\n    Hello World\n  </Mouse>,\n}',
@@ -471,6 +481,7 @@ describe('Immutable.OrderedMap', () => {
   });
 
   it('supports React elements {min: true}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.OrderedMap({a: reactElement, b: reactElement}),
@@ -481,6 +492,7 @@ describe('Immutable.OrderedMap', () => {
   });
 
   it('supports React elements {min: false}', () => {
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     const reactElement = React.createElement('Mouse', null, 'Hello World');
     expect(
       Immutable.OrderedMap({a: reactElement, b: reactElement}),

packages/pretty-format/src/__tests__/react.test.js

@@ -13,6 +13,7 @@ import type {OptionsReceived} from 'types/PrettyFormat';
 const React = require('react');
 const renderer = require('react-test-renderer');
 
+const elementSymbol = Symbol.for('react.element');
 const testSymbol = Symbol.for('react.test.json');
 
 const prettyFormat = require('../');
@@ -57,34 +58,39 @@ test('supports a single element with no props or children', () => {
 
 test('supports a single element with non-empty string child', () => {
   assertPrintedJSX(
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     React.createElement('Mouse', null, 'Hello World'),
     '<Mouse>\n  Hello World\n</Mouse>',
   );
 });
 
 test('supports a single element with empty string child', () => {
   assertPrintedJSX(
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     React.createElement('Mouse', null, ''),
     '<Mouse>\n  \n</Mouse>',
   );
 });
 
 test('supports a single element with non-zero number child', () => {
   assertPrintedJSX(
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     React.createElement('Mouse', null, 4),
     '<Mouse>\n  4\n</Mouse>',
   );
 });
 
 test('supports a single element with zero number child', () => {
   assertPrintedJSX(
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     React.createElement('Mouse', null, 0),
     '<Mouse>\n  0\n</Mouse>',
   );
 });
 
 test('supports a single element with mixed children', () => {
   assertPrintedJSX(
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     React.createElement('Mouse', null, [[1, null], 2, undefined, [false, [3]]]),
     '<Mouse>\n  1\n  2\n  3\n</Mouse>',
   );
@@ -100,6 +106,7 @@ test('supports props with strings', () => {
 test('supports props with multiline strings', () => {
   const val = React.createElement(
     'svg',
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     null,
     React.createElement('polyline', {
       id: 'J',
@@ -168,6 +175,7 @@ test('escapes children properly', () => {
   assertPrintedJSX(
     React.createElement(
       'Mouse',
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       null,
       '"-"',
       React.createElement('Mouse'),
@@ -294,19 +302,16 @@ test('supports a single element with custom React elements with a child', () =>
   );
 });
 
-test('supports Unknown element', () => {
-  // Suppress React.createElement(undefined) console error
-  const consoleError = console.error;
-  (console: Object).error = jest.fn();
-  expect(formatElement(React.createElement(undefined))).toEqual(
+test('supports undefined element type', () => {
+  expect(formatElement({$$typeof: elementSymbol, props: {}})).toEqual(
     '<UNDEFINED />',
   );
-  (console: Object).error = consoleError;
 });
 
 test('supports a single element with React elements with a child', () => {
   assertPrintedJSX(
     React.createElement('Mouse', {
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       prop: React.createElement('div', null, 'mouse'),
     }),
     '<Mouse\n  prop={\n    <div>\n      mouse\n    </div>\n  }\n/>',
@@ -318,8 +323,10 @@ test('supports a single element with React elements with children', () => {
     React.createElement('Mouse', {
       prop: React.createElement(
         'div',
+        // $FlowFixMe: https://github.com/facebook/flow/issues/4658
         null,
         'mouse',
+        // $FlowFixMe: https://github.com/facebook/flow/issues/4658
         React.createElement('span', null, 'rat'),
       ),
     }),
@@ -330,6 +337,7 @@ test('supports a single element with React elements with children', () => {
 test('supports a single element with React elements with array children', () => {
   assertPrintedJSX(
     React.createElement('Mouse', {
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       prop: React.createElement('div', null, 'mouse', [
         React.createElement('span', {key: 1}, 'rat'),
         React.createElement('span', {key: 2}, 'cat'),
@@ -341,7 +349,9 @@ test('supports a single element with React elements with array children', () =>
 
 test('supports array of elements', () => {
   const val = [
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     React.createElement('dt', null, 'jest'),
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     React.createElement('dd', null, 'to talk in a playful manner'),
     React.createElement(
       'dd',
@@ -402,6 +412,7 @@ describe('test object for subset match', () => {
 describe('indent option', () => {
   const val = React.createElement(
     'ul',
+    // $FlowFixMe: https://github.com/facebook/flow/issues/4658
     null,
     React.createElement(
       'li',
@@ -451,6 +462,7 @@ describe('maxDepth option', () => {
     const val = React.createElement(
       // ++depth === 1
       'dl',
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       null,
       React.createElement('dt', {id: 'jest'}, 'jest'), // ++depth === 2
       React.createElement(
@@ -460,6 +472,7 @@ describe('maxDepth option', () => {
           id: 'jest-1',
         },
         'to talk in a ',
+        // $FlowFixMe: https://github.com/facebook/flow/issues/4658
         React.createElement('em', null, 'playful'), // ++depth === 3
         ' manner',
       ),
@@ -473,6 +486,7 @@ describe('maxDepth option', () => {
             color: '#99424F',
           },
         },
+        // $FlowFixMe: https://github.com/facebook/flow/issues/4658
         React.createElement('em', null, 'painless'), // ++depth === 3
         ' JavaScript testing',
       ),
@@ -513,6 +527,7 @@ describe('maxDepth option', () => {
           id: 'jest-1',
         },
         'to talk in a ',
+        // $FlowFixMe: https://github.com/facebook/flow/issues/4658
         React.createElement('em', null, 'playful'), // ++depth === 3
         ' manner',
       ),
@@ -526,6 +541,7 @@ describe('maxDepth option', () => {
             color: '#99424F',
           },
         },
+        // $FlowFixMe: https://github.com/facebook/flow/issues/4658
         React.createElement('em', null, 'painless'), // ++depth === 3
         ' JavaScript testing',
       ),
@@ -582,8 +598,10 @@ test('ReactElement plugin highlights syntax', () => {
   const jsx = React.createElement('Mouse', {
     prop: React.createElement(
       'div',
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       null,
       'mouse',
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       React.createElement('span', null, 'rat'),
     ),
   });
@@ -598,8 +616,10 @@ test('ReactTestComponent plugin highlights syntax', () => {
   const jsx = React.createElement('Mouse', {
     prop: React.createElement(
       'div',
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       null,
       'mouse',
+      // $FlowFixMe: https://github.com/facebook/flow/issues/4658
       React.createElement('span', null, 'rat'),
     ),
   });

packages/pretty-format/src/plugins/react_element.js

@@ -43,7 +43,7 @@ const getType = element => {
 };
 
 export const serialize = (
-  element: React$Element<*>,
+  element: React$Element<any>,
   config: Config,
   indentation: string,
   depth: number,

test_utils.js

@@ -105,7 +105,6 @@ const makeGlobalConfig = (overrides: Object = {}): GlobalConfig => {
     `);
   }
 
-  // $FlowFixMe Object.assign
   return Object.assign({}, DEFAULT_GLOBAL_CONFIG, overrides);
 };
 
@@ -120,7 +119,6 @@ const makeProjectConfig = (overrides: Object = {}): ProjectConfig => {
     `);
   }
 
-  // $FlowFixMe Object.assign
   return Object.assign({}, DEFAULT_PROJECT_CONFIG, overrides);
 };
 

yarn.lock

@@ -2763,9 +2763,9 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
-flow-bin@^0.50.0:
-  version "0.50.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.50.0.tgz#d4cdb2430dee1a3599f0eb6fe551146e3027256a"
+flow-bin@^0.53.1:
+  version "0.53.1"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.53.1.tgz#9b22b63a23c99763ae533ebbab07f88c88c97d84"
 
 flow-remove-types@^1.1.0:
   version "1.2.1"