Migrate pretty-format to TypeScript #7809

SimenB · 2019-02-05T19:26:48Z

Summary

The first package in the migration.

Diff in built code (this is bigger than it'd usually be due to the browser-bundle which includes filenames):

diff --git c/packages/pretty-format/build-es5/index.js w/packages/pretty-format/build-es5/index.js
index 260e818a8..831bb6eb3 100644
--- c/packages/pretty-format/build-es5/index.js
+++ w/packages/pretty-format/build-es5/index.js
@@ -91,7 +91,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = "./packages/pretty-format/src/index.js");
+/******/ 	return __webpack_require__(__webpack_require__.s = "./packages/pretty-format/src/index.ts");
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -1617,9 +1617,9 @@ module.exports = function (module) {
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/collections.js":
+/***/ "./packages/pretty-format/src/collections.ts":
 /*!***************************************************!*\
-  !*** ./packages/pretty-format/src/collections.js ***!
+  !*** ./packages/pretty-format/src/collections.ts ***!
   \***************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1641,14 +1641,13 @@ exports.printObjectProperties = printObjectProperties;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * 
  */
 var getKeysOfEnumerableProperties = function getKeysOfEnumerableProperties(object) {
   var keys = Object.keys(object).sort();
 
   if (Object.getOwnPropertySymbols) {
     Object.getOwnPropertySymbols(object).forEach(function (symbol) {
-      //$FlowFixMe because property enumerable is missing in undefined
+      // @ts-ignore: because property enumerable is missing in undefined
       if (Object.getOwnPropertyDescriptor(object, symbol).enumerable) {
         keys.push(symbol);
       }
@@ -1777,9 +1776,9 @@ function printObjectProperties(val, config, indentation, depth, refs, printer) {
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/index.js":
+/***/ "./packages/pretty-format/src/index.ts":
 /*!*********************************************!*\
-  !*** ./packages/pretty-format/src/index.js ***!
+  !*** ./packages/pretty-format/src/index.ts ***!
   \*********************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1789,21 +1788,21 @@ function printObjectProperties(val, config, indentation, depth, refs, printer) {
 
 var _ansiStyles = _interopRequireDefault(__webpack_require__(/*! ansi-styles */ "./node_modules/ansi-styles/index.js"));
 
-var _collections = __webpack_require__(/*! ./collections */ "./packages/pretty-format/src/collections.js");
+var _collections = __webpack_require__(/*! ./collections */ "./packages/pretty-format/src/collections.ts");
 
-var _AsymmetricMatcher = _interopRequireDefault(__webpack_require__(/*! ./plugins/AsymmetricMatcher */ "./packages/pretty-format/src/plugins/AsymmetricMatcher.js"));
+var _AsymmetricMatcher = _interopRequireDefault(__webpack_require__(/*! ./plugins/AsymmetricMatcher */ "./packages/pretty-format/src/plugins/AsymmetricMatcher.ts"));
 
-var _ConvertAnsi = _interopRequireDefault(__webpack_require__(/*! ./plugins/ConvertAnsi */ "./packages/pretty-format/src/plugins/ConvertAnsi.js"));
+var _ConvertAnsi = _interopRequireDefault(__webpack_require__(/*! ./plugins/ConvertAnsi */ "./packages/pretty-format/src/plugins/ConvertAnsi.ts"));
 
-var _DOMCollection = _interopRequireDefault(__webpack_require__(/*! ./plugins/DOMCollection */ "./packages/pretty-format/src/plugins/DOMCollection.js"));
+var _DOMCollection = _interopRequireDefault(__webpack_require__(/*! ./plugins/DOMCollection */ "./packages/pretty-format/src/plugins/DOMCollection.ts"));
 
-var _DOMElement = _interopRequireDefault(__webpack_require__(/*! ./plugins/DOMElement */ "./packages/pretty-format/src/plugins/DOMElement.js"));
+var _DOMElement = _interopRequireDefault(__webpack_require__(/*! ./plugins/DOMElement */ "./packages/pretty-format/src/plugins/DOMElement.ts"));
 
-var _Immutable = _interopRequireDefault(__webpack_require__(/*! ./plugins/Immutable */ "./packages/pretty-format/src/plugins/Immutable.js"));
+var _Immutable = _interopRequireDefault(__webpack_require__(/*! ./plugins/Immutable */ "./packages/pretty-format/src/plugins/Immutable.ts"));
 
-var _ReactElement = _interopRequireDefault(__webpack_require__(/*! ./plugins/ReactElement */ "./packages/pretty-format/src/plugins/ReactElement.js"));
+var _ReactElement = _interopRequireDefault(__webpack_require__(/*! ./plugins/ReactElement */ "./packages/pretty-format/src/plugins/ReactElement.ts"));
 
-var _ReactTestComponent = _interopRequireDefault(__webpack_require__(/*! ./plugins/ReactTestComponent */ "./packages/pretty-format/src/plugins/ReactTestComponent.js"));
+var _ReactTestComponent = _interopRequireDefault(__webpack_require__(/*! ./plugins/ReactTestComponent */ "./packages/pretty-format/src/plugins/ReactTestComponent.ts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -2007,11 +2006,15 @@ function printComplexValue(val, config, indentation, depth, refs, hasCalledToJSO
   return hitMaxDepth || isWindow(val) ? '[' + getConstructorName(val) + ']' : (min ? '' : getConstructorName(val) + ' ') + '{' + (0, _collections.printObjectProperties)(val, config, indentation, depth, refs, printer) + '}';
 }
 
+function isNewPlugin(plugin) {
+  return plugin.serialize != null;
+}
+
 function printPlugin(plugin, val, config, indentation, depth, refs) {
   var printed;
 
   try {
-    printed = plugin.serialize ? plugin.serialize(val, config, indentation, depth, refs, printer) : plugin.print(val, function (valChild) {
+    printed = isNewPlugin(plugin) ? plugin.serialize(val, config, indentation, depth, refs, printer) : plugin.print(val, function (valChild) {
       return printer(valChild, config, indentation, depth, refs);
     }, function (str) {
       var indentationNext = indentation + config.indent;
@@ -2105,8 +2108,7 @@ function validateOptions(options) {
   }
 }
 
-var getColorsHighlight = function getColorsHighlight(options // $FlowFixMe: Flow thinks keys from `Colors` are missing from `DEFAULT_THEME_KEYS`
-) {
+var getColorsHighlight = function getColorsHighlight(options) {
   return DEFAULT_THEME_KEYS.reduce(function (colors, key) {
     var value = options.theme && options.theme[key] !== undefined ? options.theme[key] : DEFAULT_THEME[key];
     var color = _ansiStyles.default[value];
@@ -2122,15 +2124,13 @@ var getColorsHighlight = function getColorsHighlight(options // $FlowFixMe: Flow
 };
 
 var getColorsEmpty = function getColorsEmpty() {
-  return (// $FlowFixMe: Flow thinks keys from `Colors` are missing from `DEFAULT_THEME_KEYS`
-    DEFAULT_THEME_KEYS.reduce(function (colors, key) {
-      colors[key] = {
-        close: '',
-        open: ''
-      };
-      return colors;
-    }, Object.create(null))
-  );
+  return DEFAULT_THEME_KEYS.reduce(function (colors, key) {
+    colors[key] = {
+      close: '',
+      open: ''
+    };
+    return colors;
+  }, Object.create(null));
 };
 
 var getPrintFunctionName = function getPrintFunctionName(options) {
@@ -2200,9 +2200,9 @@ module.exports = prettyFormat;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/AsymmetricMatcher.js":
+/***/ "./packages/pretty-format/src/plugins/AsymmetricMatcher.ts":
 /*!*****************************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/AsymmetricMatcher.js ***!
+  !*** ./packages/pretty-format/src/plugins/AsymmetricMatcher.ts ***!
   \*****************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2215,15 +2215,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.test = exports.serialize = void 0;
 
-var _collections = __webpack_require__(/*! ../collections */ "./packages/pretty-format/src/collections.js");
+var _collections = __webpack_require__(/*! ../collections */ "./packages/pretty-format/src/collections.ts");
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * 
  */
 var asymmetricMatcher = Symbol.for('jest.asymmetricMatcher');
 var SPACE = ' ';
@@ -2265,17 +2263,18 @@ var test = function test(val) {
 };
 
 exports.test = test;
-var _default = {
+var plugin = {
   serialize: serialize,
   test: test
 };
+var _default = plugin;
 exports.default = _default;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/ConvertAnsi.js":
+/***/ "./packages/pretty-format/src/plugins/ConvertAnsi.ts":
 /*!***********************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/ConvertAnsi.js ***!
+  !*** ./packages/pretty-format/src/plugins/ConvertAnsi.ts ***!
   \***********************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2299,11 +2298,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * 
  */
 var toHumanReadableAnsi = function toHumanReadableAnsi(text) {
-  return text.replace((0, _ansiRegex.default)(), function (match, offset, string) {
+  return text.replace((0, _ansiRegex.default)(), function (match) {
     switch (match) {
       case _ansiStyles.default.red.close:
       case _ansiStyles.default.green.close:
@@ -2364,7 +2361,7 @@ var toHumanReadableAnsi = function toHumanReadableAnsi(text) {
 };
 
 var test = function test(val) {
-  return typeof val === 'string' && val.match((0, _ansiRegex.default)());
+  return typeof val === 'string' && !!val.match((0, _ansiRegex.default)());
 };
 
 exports.test = test;
@@ -2374,17 +2371,18 @@ var serialize = function serialize(val, config, indentation, depth, refs, printe
 };
 
 exports.serialize = serialize;
-var _default = {
+var plugin = {
   serialize: serialize,
   test: test
 };
+var _default = plugin;
 exports.default = _default;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/DOMCollection.js":
+/***/ "./packages/pretty-format/src/plugins/DOMCollection.ts":
 /*!*************************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/DOMCollection.js ***!
+  !*** ./packages/pretty-format/src/plugins/DOMCollection.ts ***!
   \*************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2397,7 +2395,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.serialize = exports.test = void 0;
 
-var _collections = __webpack_require__(/*! ../collections */ "./packages/pretty-format/src/collections.js");
+var _collections = __webpack_require__(/*! ../collections */ "./packages/pretty-format/src/collections.ts");
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
@@ -2434,17 +2432,18 @@ var serialize = function serialize(collection, config, indentation, depth, refs,
 };
 
 exports.serialize = serialize;
-var _default = {
+var plugin = {
   serialize: serialize,
   test: test
 };
+var _default = plugin;
 exports.default = _default;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/DOMElement.js":
+/***/ "./packages/pretty-format/src/plugins/DOMElement.ts":
 /*!**********************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/DOMElement.js ***!
+  !*** ./packages/pretty-format/src/plugins/DOMElement.ts ***!
   \**********************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2457,15 +2456,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.serialize = exports.test = void 0;
 
-var _markup = __webpack_require__(/*! ./lib/markup */ "./packages/pretty-format/src/plugins/lib/markup.js");
+var _markup = __webpack_require__(/*! ./lib/markup */ "./packages/pretty-format/src/plugins/lib/markup.ts");
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * 
  */
 var ELEMENT_NODE = 1;
 var TEXT_NODE = 3;
@@ -2479,50 +2476,58 @@ var testNode = function testNode(nodeType, name) {
 
 var test = function test(val) {
   return val && val.constructor && val.constructor.name && testNode(val.nodeType, val.constructor.name);
-}; // Convert array of attribute objects to keys array and props object.
-
+};
 
 exports.test = test;
 
-var keysMapper = function keysMapper(attribute) {
-  return attribute.name;
-};
+function nodeIsText(node) {
+  return node.nodeType === TEXT_NODE;
+}
 
-var propsReducer = function propsReducer(props, attribute) {
-  props[attribute.name] = attribute.value;
-  return props;
-};
+function nodeIsComment(node) {
+  return node.nodeType === COMMENT_NODE;
+}
+
+function nodeIsFragment(node) {
+  return node.nodeType === FRAGMENT_NODE;
+}
 
 var serialize = function serialize(node, config, indentation, depth, refs, printer) {
-  if (node.nodeType === TEXT_NODE) {
+  if (nodeIsText(node)) {
     return (0, _markup.printText)(node.data, config);
   }
 
-  if (node.nodeType === COMMENT_NODE) {
+  if (nodeIsComment(node)) {
     return (0, _markup.printComment)(node.data, config);
   }
 
-  var type = node.nodeType === FRAGMENT_NODE ? "DocumentFragment" : node.tagName.toLowerCase();
+  var type = nodeIsFragment(node) ? "DocumentFragment" : node.tagName.toLowerCase();
 
   if (++depth > config.maxDepth) {
     return (0, _markup.printElementAsLeaf)(type, config);
   }
 
-  return (0, _markup.printElement)(type, (0, _markup.printProps)(Array.prototype.map.call(node.attributes || [], keysMapper).sort(), Array.prototype.reduce.call(node.attributes || [], propsReducer, {}), config, indentation + config.indent, depth, refs, printer), (0, _markup.printChildren)(Array.prototype.slice.call(node.childNodes || node.children), config, indentation + config.indent, depth, refs, printer), config, indentation);
+  return (0, _markup.printElement)(type, (0, _markup.printProps)(nodeIsFragment(node) ? [] : Array.from(node.attributes).map(function (attr) {
+    return attr.name;
+  }).sort(), nodeIsFragment(node) ? [] : Array.from(node.attributes).reduce(function (props, attribute) {
+    props[attribute.name] = attribute.value;
+    return props;
+  }, {}), config, indentation + config.indent, depth, refs, printer), (0, _markup.printChildren)(Array.prototype.slice.call(node.childNodes || node.children), config, indentation + config.indent, depth, refs, printer), config, indentation);
 };
 
 exports.serialize = serialize;
-var _default = {
+var plugin = {
   serialize: serialize,
   test: test
 };
+var _default = plugin;
 exports.default = _default;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/Immutable.js":
+/***/ "./packages/pretty-format/src/plugins/Immutable.ts":
 /*!*********************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/Immutable.js ***!
+  !*** ./packages/pretty-format/src/plugins/Immutable.ts ***!
   \*********************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2535,15 +2540,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.test = exports.serialize = void 0;
 
-var _collections = __webpack_require__(/*! ../collections */ "./packages/pretty-format/src/collections.js");
+var _collections = __webpack_require__(/*! ../collections */ "./packages/pretty-format/src/collections.ts");
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * 
  */
 // SENTINEL constants are from https://github.com/facebook/immutable-js
 var IS_ITERABLE_SENTINEL = '@@__IMMUTABLE_ITERABLE__@@';
@@ -2657,17 +2660,18 @@ var test = function test(val) {
 };
 
 exports.test = test;
-var _default = {
+var plugin = {
   serialize: serialize,
   test: test
 };
+var _default = plugin;
 exports.default = _default;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/ReactElement.js":
+/***/ "./packages/pretty-format/src/plugins/ReactElement.ts":
 /*!************************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/ReactElement.js ***!
+  !*** ./packages/pretty-format/src/plugins/ReactElement.ts ***!
   \************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2680,7 +2684,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.test = exports.serialize = void 0;
 
-var _markup = __webpack_require__(/*! ./lib/markup */ "./packages/pretty-format/src/plugins/lib/markup.js");
+var _markup = __webpack_require__(/*! ./lib/markup */ "./packages/pretty-format/src/plugins/lib/markup.ts");
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -2756,17 +2760,18 @@ var test = function test(val) {
 };
 
 exports.test = test;
-var _default = {
+var plugin = {
   serialize: serialize,
   test: test
 };
+var _default = plugin;
 exports.default = _default;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/ReactTestComponent.js":
+/***/ "./packages/pretty-format/src/plugins/ReactTestComponent.ts":
 /*!******************************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/ReactTestComponent.js ***!
+  !*** ./packages/pretty-format/src/plugins/ReactTestComponent.ts ***!
   \******************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2779,16 +2784,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.test = exports.serialize = void 0;
 
-var _markup = __webpack_require__(/*! ./lib/markup */ "./packages/pretty-format/src/plugins/lib/markup.js");
+var _markup = __webpack_require__(/*! ./lib/markup */ "./packages/pretty-format/src/plugins/lib/markup.ts");
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * 
  */
+// Child can be `number` in Stack renderer but not in Fiber renderer.
 var testSymbol = Symbol.for('react.test.json');
 
 var getPropKeys = function getPropKeys(object) {
@@ -2809,17 +2813,18 @@ var test = function test(val) {
 };
 
 exports.test = test;
-var _default = {
+var plugin = {
   serialize: serialize,
   test: test
 };
+var _default = plugin;
 exports.default = _default;
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/lib/escapeHTML.js":
+/***/ "./packages/pretty-format/src/plugins/lib/escapeHTML.ts":
 /*!**************************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/lib/escapeHTML.js ***!
+  !*** ./packages/pretty-format/src/plugins/lib/escapeHTML.ts ***!
   \**************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2837,8 +2842,6 @@ exports.default = escapeHTML;
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * 
  */
 function escapeHTML(str) {
   return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -2846,9 +2849,9 @@ function escapeHTML(str) {
 
 /***/ }),
 
-/***/ "./packages/pretty-format/src/plugins/lib/markup.js":
+/***/ "./packages/pretty-format/src/plugins/lib/markup.ts":
 /*!**********************************************************!*\
-  !*** ./packages/pretty-format/src/plugins/lib/markup.js ***!
+  !*** ./packages/pretty-format/src/plugins/lib/markup.ts ***!
   \**********************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2861,7 +2864,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.printElementAsLeaf = exports.printElement = exports.printComment = exports.printText = exports.printChildren = exports.printProps = void 0;
 
-var _escapeHTML = _interopRequireDefault(__webpack_require__(/*! ./escapeHTML */ "./packages/pretty-format/src/plugins/lib/escapeHTML.js"));
+var _escapeHTML = _interopRequireDefault(__webpack_require__(/*! ./escapeHTML */ "./packages/pretty-format/src/plugins/lib/escapeHTML.ts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -2870,8 +2873,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * 
  */
 // Return empty string if keys is empty.
 var printProps = function printProps(keys, props, config, indentation, depth, refs, printer) {
diff --git c/packages/pretty-format/build/collections.js w/packages/pretty-format/build/collections.js
index b51e03eeb..3dc4c6e4a 100644
--- c/packages/pretty-format/build/collections.js
+++ w/packages/pretty-format/build/collections.js
@@ -14,14 +14,13 @@ exports.printObjectProperties = printObjectProperties;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- *
  */
 const getKeysOfEnumerableProperties = object => {
   const keys = Object.keys(object).sort();
 
   if (Object.getOwnPropertySymbols) {
     Object.getOwnPropertySymbols(object).forEach(symbol => {
-      //$FlowFixMe because property enumerable is missing in undefined
+      // @ts-ignore: because property enumerable is missing in undefined
       if (Object.getOwnPropertyDescriptor(object, symbol).enumerable) {
         keys.push(symbol);
       }
diff --git c/packages/pretty-format/build/index.js w/packages/pretty-format/build/index.js
index 617feddf5..c93b39eec 100644
--- c/packages/pretty-format/build/index.js
+++ w/packages/pretty-format/build/index.js
@@ -277,11 +277,15 @@ function printComplexValue(
         '}';
 }
 
+function isNewPlugin(plugin) {
+  return plugin.serialize != null;
+}
+
 function printPlugin(plugin, val, config, indentation, depth, refs) {
   let printed;
 
   try {
-    printed = plugin.serialize
+    printed = isNewPlugin(plugin)
       ? plugin.serialize(val, config, indentation, depth, refs, printer)
       : plugin.print(
           val,
@@ -402,9 +406,7 @@ function validateOptions(options) {
   }
 }
 
-const getColorsHighlight = (
-  options // $FlowFixMe: Flow thinks keys from `Colors` are missing from `DEFAULT_THEME_KEYS`
-) =>
+const getColorsHighlight = options =>
   DEFAULT_THEME_KEYS.reduce((colors, key) => {
     const value =
       options.theme && options.theme[key] !== undefined
@@ -428,7 +430,6 @@ const getColorsHighlight = (
   }, Object.create(null));
 
 const getColorsEmpty = () =>
-  // $FlowFixMe: Flow thinks keys from `Colors` are missing from `DEFAULT_THEME_KEYS`
   DEFAULT_THEME_KEYS.reduce((colors, key) => {
     colors[key] = {
       close: '',
diff --git c/packages/pretty-format/build/plugins/AsymmetricMatcher.js w/packages/pretty-format/build/plugins/AsymmetricMatcher.js
index 06798c1da..43af2c82d 100644
--- c/packages/pretty-format/build/plugins/AsymmetricMatcher.js
+++ w/packages/pretty-format/build/plugins/AsymmetricMatcher.js
@@ -92,8 +92,9 @@ exports.serialize = serialize;
 const test = val => val && val.$$typeof === asymmetricMatcher;
 
 exports.test = test;
-var _default = {
+const plugin = {
   serialize,
   test
 };
+var _default = plugin;
 exports.default = _default;
diff --git c/packages/pretty-format/build/plugins/ConvertAnsi.js w/packages/pretty-format/build/plugins/ConvertAnsi.js
index c3c8f38e8..3d2d8fcbe 100644
--- c/packages/pretty-format/build/plugins/ConvertAnsi.js
+++ w/packages/pretty-format/build/plugins/ConvertAnsi.js
@@ -18,11 +18,9 @@ function _interopRequireDefault(obj) {
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- *
  */
 const toHumanReadableAnsi = text =>
-  text.replace((0, _ansiRegex.default)(), (match, offset, string) => {
+  text.replace((0, _ansiRegex.default)(), match => {
     switch (match) {
       case _ansiStyles.default.red.close:
       case _ansiStyles.default.green.close:
@@ -82,7 +80,7 @@ const toHumanReadableAnsi = text =>
   });
 
 const test = val =>
-  typeof val === 'string' && val.match((0, _ansiRegex.default)());
+  typeof val === 'string' && !!val.match((0, _ansiRegex.default)());
 
 exports.test = test;
 
@@ -90,8 +88,9 @@ const serialize = (val, config, indentation, depth, refs, printer) =>
   printer(toHumanReadableAnsi(val), config, indentation, depth, refs);
 
 exports.serialize = serialize;
-var _default = {
+const plugin = {
   serialize,
   test
 };
+var _default = plugin;
 exports.default = _default;
diff --git c/packages/pretty-format/build/plugins/DOMCollection.js w/packages/pretty-format/build/plugins/DOMCollection.js
index 4bf93c477..d9786c044 100644
--- c/packages/pretty-format/build/plugins/DOMCollection.js
+++ w/packages/pretty-format/build/plugins/DOMCollection.js
@@ -95,8 +95,9 @@ const serialize = (collection, config, indentation, depth, refs, printer) => {
 };
 
 exports.serialize = serialize;
-var _default = {
+const plugin = {
   serialize,
   test
 };
+var _default = plugin;
 exports.default = _default;
diff --git c/packages/pretty-format/build/plugins/DOMElement.js w/packages/pretty-format/build/plugins/DOMElement.js
index 3f20c0ee8..09587c1f8 100644
--- c/packages/pretty-format/build/plugins/DOMElement.js
+++ w/packages/pretty-format/build/plugins/DOMElement.js
@@ -12,8 +12,6 @@ var _markup = require('./lib/markup');
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- *
  */
 const ELEMENT_NODE = 1;
 const TEXT_NODE = 3;
@@ -31,30 +29,34 @@ const test = val =>
   val &&
   val.constructor &&
   val.constructor.name &&
-  testNode(val.nodeType, val.constructor.name); // Convert array of attribute objects to keys array and props object.
+  testNode(val.nodeType, val.constructor.name);
 
 exports.test = test;
 
-const keysMapper = attribute => attribute.name;
+function nodeIsText(node) {
+  return node.nodeType === TEXT_NODE;
+}
 
-const propsReducer = (props, attribute) => {
-  props[attribute.name] = attribute.value;
-  return props;
-};
+function nodeIsComment(node) {
+  return node.nodeType === COMMENT_NODE;
+}
+
+function nodeIsFragment(node) {
+  return node.nodeType === FRAGMENT_NODE;
+}
 
 const serialize = (node, config, indentation, depth, refs, printer) => {
-  if (node.nodeType === TEXT_NODE) {
+  if (nodeIsText(node)) {
     return (0, _markup.printText)(node.data, config);
   }
 
-  if (node.nodeType === COMMENT_NODE) {
+  if (nodeIsComment(node)) {
     return (0, _markup.printComment)(node.data, config);
   }
 
-  const type =
-    node.nodeType === FRAGMENT_NODE
-      ? `DocumentFragment`
-      : node.tagName.toLowerCase();
+  const type = nodeIsFragment(node)
+    ? `DocumentFragment`
+    : node.tagName.toLowerCase();
 
   if (++depth > config.maxDepth) {
     return (0, _markup.printElementAsLeaf)(type, config);
@@ -63,8 +65,17 @@ const serialize = (node, config, indentation, depth, refs, printer) => {
   return (0, _markup.printElement)(
     type,
     (0, _markup.printProps)(
-      Array.prototype.map.call(node.attributes || [], keysMapper).sort(),
-      Array.prototype.reduce.call(node.attributes || [], propsReducer, {}),
+      nodeIsFragment(node)
+        ? []
+        : Array.from(node.attributes)
+            .map(attr => attr.name)
+            .sort(),
+      nodeIsFragment(node)
+        ? []
+        : Array.from(node.attributes).reduce((props, attribute) => {
+            props[attribute.name] = attribute.value;
+            return props;
+          }, {}),
       config,
       indentation + config.indent,
       depth,
@@ -85,8 +96,9 @@ const serialize = (node, config, indentation, depth, refs, printer) => {
 };
 
 exports.serialize = serialize;
-var _default = {
+const plugin = {
   serialize,
   test
 };
+var _default = plugin;
 exports.default = _default;
diff --git c/packages/pretty-format/build/plugins/Immutable.js w/packages/pretty-format/build/plugins/Immutable.js
index a80903ded..be230aa29 100644
--- c/packages/pretty-format/build/plugins/Immutable.js
+++ w/packages/pretty-format/build/plugins/Immutable.js
@@ -12,8 +12,6 @@ var _collections = require('../collections');
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- *
  */
 // SENTINEL constants are from https://github.com/facebook/immutable-js
 const IS_ITERABLE_SENTINEL = '@@__IMMUTABLE_ITERABLE__@@';
@@ -240,8 +238,9 @@ const test = val =>
   (val[IS_ITERABLE_SENTINEL] === true || val[IS_RECORD_SENTINEL] === true);
 
 exports.test = test;
-var _default = {
+const plugin = {
   serialize,
   test
 };
+var _default = plugin;
 exports.default = _default;
diff --git c/packages/pretty-format/build/plugins/ReactElement.js w/packages/pretty-format/build/plugins/ReactElement.js
index 6748b6357..83157e8cd 100644
--- c/packages/pretty-format/build/plugins/ReactElement.js
+++ w/packages/pretty-format/build/plugins/ReactElement.js
@@ -100,8 +100,9 @@ exports.serialize = serialize;
 const test = val => val && val.$$typeof === elementSymbol;
 
 exports.test = test;
-var _default = {
+const plugin = {
   serialize,
   test
 };
+var _default = plugin;
 exports.default = _default;
diff --git c/packages/pretty-format/build/plugins/ReactTestComponent.js w/packages/pretty-format/build/plugins/ReactTestComponent.js
index d9b6322a6..af4cf2b6c 100644
--- c/packages/pretty-format/build/plugins/ReactTestComponent.js
+++ w/packages/pretty-format/build/plugins/ReactTestComponent.js
@@ -54,8 +54,9 @@ exports.serialize = serialize;
 const test = val => val && val.$$typeof === testSymbol;
 
 exports.test = test;
-var _default = {
+const plugin = {
   serialize,
   test
 };
+var _default = plugin;
 exports.default = _default;
diff --git c/packages/pretty-format/build/plugins/lib/escapeHTML.js w/packages/pretty-format/build/plugins/lib/escapeHTML.js
index f99c94e0a..50dda2590 100644
--- c/packages/pretty-format/build/plugins/lib/escapeHTML.js
+++ w/packages/pretty-format/build/plugins/lib/escapeHTML.js
@@ -10,8 +10,6 @@ exports.default = escapeHTML;
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- *
  */
 function escapeHTML(str) {
   return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
diff --git c/packages/pretty-format/build/plugins/lib/markup.js w/packages/pretty-format/build/plugins/lib/markup.js
index 72586164b..d47b88f7b 100644
--- c/packages/pretty-format/build/plugins/lib/markup.js
+++ w/packages/pretty-format/build/plugins/lib/markup.js
@@ -16,8 +16,6 @@ function _interopRequireDefault(obj) {
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- *
  */
 // Return empty string if keys is empty.
 const printProps = (keys, props, config, indentation, depth, refs, printer) => {

Test plan

Green CI

SimenB · 2019-02-05T20:12:12Z

packages/pretty-format/src/__tests__/setPrettyPrint.ts

+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-ignore


Didn't know about this dep until I migrated the tests today. So this is kinda cheating

SimenB · 2019-02-05T20:14:06Z

packages/pretty-format/src/types.ts

@@ -0,0 +1,117 @@
+/**


This purposefully does not export all the things found in https://github.com/facebook/jest/blob/master/types/PrettyFormat.js

SimenB · 2019-02-06T10:01:51Z

scripts/build.js

@@ -196,9 +196,7 @@ function compileTypes(packages) {
    fs.existsSync(path.resolve(p, 'tsconfig.json'))
  );

-  if (packageWithTs.length > 0) {


this stuff is not needed now that we have a package migrated

orta · 2019-02-06T16:25:43Z

This looks good to me, I've cloned it and dug around (the editor support is perfect) and I've converted some of the functions docs so they'll show inline and added ESDocs to the exported API.

SimenB · 2019-02-06T16:30:59Z

Thanks, @orta!

I've converted some of the functions docs so they'll show inline and added ESDocs to the exported API.

Is this something we can lint for or something like that?

orta · 2019-02-06T16:56:52Z

TSLint does support this (making sure all exported objects have docs) but I'm not sure we want to be adopting TS lint when there's movement back to ESLint for TS

I couldn't find something in ESLint to verify that exports have JSDocs

orta · 2019-02-06T16:59:33Z

Oh yeah, I got pretty close to building this feature in ESLint eslint/eslint#7812 - but it was as we were moving to TSLint so I never went back and wrapped it up.

packages/pretty-format/src/collections.ts

SimenB · 2019-02-06T19:40:18Z

Ref jsdoc - it seems we should use eslint-plugin-jsdoc for that: https://github.com/typescript-eslint/typescript-eslint/blob/bf13399ce05275a21d95bfea327eb9b0356c8e2c/packages/eslint-plugin/ROADMAP.md

packages/pretty-format/src/__tests__/AsymmetricMatcher.test.ts

packages/pretty-format/src/collections.ts

packages/pretty-format/src/index.ts

SimenB · 2019-02-06T20:34:06Z

Thanks @milesj!

github-actions · 2021-05-12T01:30:34Z

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

SimenB added this to the TypeScript Migration milestone Feb 5, 2019

facebook-github-bot added the cla signed label Feb 5, 2019

SimenB mentioned this pull request Feb 5, 2019

☂️TypeScript migration tracking issue #7807

Closed

SimenB force-pushed the pretty-format-typescript branch from ec66556 to e707040 Compare February 6, 2019 09:20

SimenB commented Feb 6, 2019

View reviewed changes

SimenB requested review from thymikee and orta February 6, 2019 10:21

SimenB added 2 commits February 6, 2019 11:49

convert pretty-format to typescript

441f90d

changelog

c0331c1

SimenB force-pushed the pretty-format-typescript branch from e707040 to c0331c1 Compare February 6, 2019 10:49

Adds some inline docs to the exported methods

67e2488

SimenB commented Feb 6, 2019

View reviewed changes

packages/pretty-format/src/collections.ts Outdated Show resolved Hide resolved

Update collections.ts

a37f6b1

milesj reviewed Feb 6, 2019

View reviewed changes

packages/pretty-format/src/__tests__/AsymmetricMatcher.test.ts Outdated Show resolved Hide resolved

milesj reviewed Feb 6, 2019

View reviewed changes

packages/pretty-format/src/collections.ts Outdated Show resolved Hide resolved

milesj reviewed Feb 6, 2019

View reviewed changes

packages/pretty-format/src/index.ts Outdated Show resolved Hide resolved

tweak types

5cfdf4c

SimenB merged commit d1ad66e into jestjs:master Feb 6, 2019

SimenB deleted the pretty-format-typescript branch February 6, 2019 20:39

captain-yossarian pushed a commit to captain-yossarian/jest that referenced this pull request Jul 18, 2019

Migrate pretty-format to TypeScript (jestjs#7809)

ab3e4f5

snyk-bot mentioned this pull request Dec 15, 2019

[Snyk] Upgrade babel-jest from 24.0.0 to 24.9.0 jakeherp/burger-builder#14

Open

This was referenced Mar 21, 2020

[Snyk] Upgrade: jest, jest-cli lwojcik/sc2pte-panel-frontend#88

Closed

[Snyk] Upgrade jest from 24.0.0 to 24.9.0 DavidKindler/burger-builder#47

Merged

github-actions bot locked as resolved and limited conversation to collaborators May 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate pretty-format to TypeScript #7809

Migrate pretty-format to TypeScript #7809

SimenB commented Feb 5, 2019 •

edited

SimenB Feb 5, 2019

SimenB Feb 5, 2019

SimenB Feb 6, 2019

orta commented Feb 6, 2019

SimenB commented Feb 6, 2019

orta commented Feb 6, 2019

orta commented Feb 6, 2019

SimenB commented Feb 6, 2019 •

edited

SimenB commented Feb 6, 2019

github-actions bot commented May 12, 2021

Migrate pretty-format to TypeScript #7809

Migrate pretty-format to TypeScript #7809

Conversation

SimenB commented Feb 5, 2019 • edited

Summary

Test plan

SimenB Feb 5, 2019

Choose a reason for hiding this comment

SimenB Feb 5, 2019

Choose a reason for hiding this comment

SimenB Feb 6, 2019

Choose a reason for hiding this comment

orta commented Feb 6, 2019

SimenB commented Feb 6, 2019

orta commented Feb 6, 2019

orta commented Feb 6, 2019

SimenB commented Feb 6, 2019 • edited

SimenB commented Feb 6, 2019

github-actions bot commented May 12, 2021

SimenB commented Feb 5, 2019 •

edited

SimenB commented Feb 6, 2019 •

edited