Adds tests for the overlay (#2118)

* Add get-source-map tests * Fixtures shouldn't be formatted * Add mapper tests * Add stack-frame tests * Add more util tests * Add unmapper tests * Add parser tests * Switch to snapshots * Snapshot more

Adds tests for the overlay (#2118)
* Add get-source-map tests * Fixtures shouldn't be formatted * Add mapper tests * Add stack-frame tests * Add more util tests * Add unmapper tests * Add parser tests * Switch to snapshots * Snapshot more
942cf623 · Joe Haddad · Dan Abramov · 69590775 · 942cf623 · 942cf623
Commit 942cf623 authored 7 years ago by Joe Haddad Committed by Dan Abramov 7 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 83900 additions and 1 deletion
+83900 -1
--- a/packages/react-error-overlay/fixtures/bundle-default.json
+++ b/packages/react-error-overlay/fixtures/bundle-default.json
+[
+  {
+    "functionName": "App.componentDidMount",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 26122,
+    "columnNumber": 21,
+    "_originalFunctionName": "App.componentDidMount",
+    "_originalFileName": "webpack:///packages/react-scripts/template/src/App.js",
+    "_originalLineNumber": 7,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 26119,
+        "content": "  _createClass(App, [{",
+        "highlight": false
+      },
+      {
+        "lineNumber": 26120,
+        "content": "    key: 'componentDidMount',",
+        "highlight": false
+      },
+      {
+        "lineNumber": 26121,
+        "content": "    value: function componentDidMount() {",
+        "highlight": false
+      },
+      {
+        "lineNumber": 26122,
+        "content": "      document.body.missing();",
+        "highlight": true
+      },
+      {
+        "lineNumber": 26123,
+        "content": "    }",
+        "highlight": false
+      },
+      {
+        "lineNumber": 26124,
+        "content": "  }, {",
+        "highlight": false
+      },
+      {
+        "lineNumber": 26125,
+        "content": "    key: 'render',",
+        "highlight": false
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 4,
+        "content": "",
+        "highlight": false
+      },
+      {
+        "lineNumber": 5,
+        "content": "class App extends Component {",
+        "highlight": false
+      },
+      {
+        "lineNumber": 6,
+        "content": "  componentDidMount() {",
+        "highlight": false
+      },
+      {
+        "lineNumber": 7,
+        "content": "    document.body.missing()",
+        "highlight": true
+      },
+      {
+        "lineNumber": 8,
+        "content": "  }",
+        "highlight": false
+      },
+      {
+        "lineNumber": 9,
+        "content": "",
+        "highlight": false
+      },
+      {
+        "lineNumber": 10,
+        "content": "  render() {",
+        "highlight": false
+      }
+    ]
+  }
+]
--- a/packages/react-error-overlay/fixtures/bundle.json
+++ b/packages/react-error-overlay/fixtures/bundle.json
+[
+  {
+    "functionName": "App.componentDidMount",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 26122,
+    "columnNumber": 21,
+    "_originalFunctionName": "App.componentDidMount",
+    "_originalFileName": "webpack:///packages/react-scripts/template/src/App.js",
+    "_originalLineNumber": 7,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 26122,
+        "content": "      document.body.missing();",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 7,
+        "content": "    document.body.missing()",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": null,
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 30091,
+    "columnNumber": 25,
+    "_originalFunctionName": null,
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactCompositeComponent.js",
+    "_originalLineNumber": 265,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 30091,
+        "content": "            return inst.componentDidMount();",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 265,
+        "content": "            return inst.componentDidMount();",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "measureLifeCyclePerf",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 29901,
+    "columnNumber": 12,
+    "_originalFunctionName": "measureLifeCyclePerf",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactCompositeComponent.js",
+    "_originalLineNumber": 75,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 29901,
+        "content": "    return fn();",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 75,
+        "content": "    return fn();",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": null,
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 30090,
+    "columnNumber": 11,
+    "_originalFunctionName": null,
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactCompositeComponent.js",
+    "_originalLineNumber": 264,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 30090,
+        "content": "          measureLifeCyclePerf(function () {",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 264,
+        "content": "          measureLifeCyclePerf(function () {",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "CallbackQueue.notifyAll",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 13256,
+    "columnNumber": 22,
+    "_originalFunctionName": "CallbackQueue.notifyAll",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/CallbackQueue.js",
+    "_originalLineNumber": 76,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 13256,
+        "content": "        callbacks[i].call(contexts[i], arg);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 76,
+        "content": "        callbacks[i].call(contexts[i], arg);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "ReactReconcileTransaction.close",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 35124,
+    "columnNumber": 26,
+    "_originalFunctionName": "ReactReconcileTransaction.close",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactReconcileTransaction.js",
+    "_originalLineNumber": 80,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 35124,
+        "content": "    this.reactMountReady.notifyAll();",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 80,
+        "content": "    this.reactMountReady.notifyAll();",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "ReactReconcileTransaction.closeAll",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 7390,
+    "columnNumber": 25,
+    "_originalFunctionName": "ReactReconcileTransaction.closeAll",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/Transaction.js",
+    "_originalLineNumber": 206,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 7390,
+        "content": "          wrapper.close.call(this, initData);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 206,
+        "content": "          wrapper.close.call(this, initData);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "ReactReconcileTransaction.perform",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 7337,
+    "columnNumber": 16,
+    "_originalFunctionName": "ReactReconcileTransaction.perform",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/Transaction.js",
+    "_originalLineNumber": 153,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 7337,
+        "content": "          this.closeAll(0);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 153,
+        "content": "          this.closeAll(0);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "batchedMountComponentIntoNode",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 14204,
+    "columnNumber": 15,
+    "_originalFunctionName": "batchedMountComponentIntoNode",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js",
+    "_originalLineNumber": 126,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 14204,
+        "content": "  transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 126,
+        "content": "  transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "ReactDefaultBatchingStrategyTransaction.perform",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 7324,
+    "columnNumber": 20,
+    "_originalFunctionName": "ReactDefaultBatchingStrategyTransaction.perform",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/Transaction.js",
+    "_originalLineNumber": 140,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 7324,
+        "content": "      ret = method.call(scope, a, b, c, d, e, f);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 140,
+        "content": "      ret = method.call(scope, a, b, c, d, e, f);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "Object.batchedUpdates",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 33900,
+    "columnNumber": 26,
+    "_originalFunctionName": "Object.batchedUpdates",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactDefaultBatchingStrategy.js",
+    "_originalLineNumber": 62,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 33900,
+        "content": "      return transaction.perform(callback, null, a, b, c, d, e);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 62,
+        "content": "      return transaction.perform(callback, null, a, b, c, d, e);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "Object.batchedUpdates",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 2181,
+    "columnNumber": 27,
+    "_originalFunctionName": "Object.batchedUpdates",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactUpdates.js",
+    "_originalLineNumber": 97,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 2181,
+        "content": "  return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 97,
+        "content": "  return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "Object._renderNewRootComponent",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 14398,
+    "columnNumber": 18,
+    "_originalFunctionName": "Object._renderNewRootComponent",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js",
+    "_originalLineNumber": 320,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 14398,
+        "content": "    ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 320,
+        "content": "    ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "Object._renderSubtreeIntoContainer",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 14479,
+    "columnNumber": 32,
+    "_originalFunctionName": "Object._renderSubtreeIntoContainer",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js",
+    "_originalLineNumber": 401,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 14479,
+        "content": "    var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 401,
+        "content": "    var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "Object.render",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 14500,
+    "columnNumber": 23,
+    "_originalFunctionName": "Object.render",
+    "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js",
+    "_originalLineNumber": 422,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 14500,
+        "content": "    return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 422,
+        "content": "    return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "Object.friendlySyntaxErrorLabel",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 17287,
+    "columnNumber": 20,
+    "_originalFunctionName": "Object.friendlySyntaxErrorLabel",
+    "_originalFileName": "webpack:///packages/react-scripts/template/src/index.js",
+    "_originalLineNumber": 6,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 17287,
+        "content": "_reactDom2.default.render(_react2.default.createElement(_App2.default, {",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 6,
+        "content": "ReactDOM.render(<App />, document.getElementById('root'));",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "__webpack_require__",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 660,
+    "columnNumber": 30,
+    "_originalFunctionName": "__webpack_require__",
+    "_originalFileName": "webpack:/webpack/bootstrap 623dfc2b357036468bb6",
+    "_originalLineNumber": 659,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 660,
+        "content": "/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 659,
+        "content": " \t\tmodules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "fn",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 84,
+    "columnNumber": 20,
+    "_originalFunctionName": "fn",
+    "_originalFileName": "webpack:/webpack/bootstrap 623dfc2b357036468bb6",
+    "_originalLineNumber": 83,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 84,
+        "content": "/******/ \t\t\treturn __webpack_require__(request);\r",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 83,
+        "content": " \t\t\treturn __webpack_require__(request);\r",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "Object.<anonymous>",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 41219,
+    "columnNumber": 18,
+    "_originalFunctionName": "Object.<anonymous>",
+    "_originalFileName": null,
+    "_originalLineNumber": null,
+    "_originalColumnNumber": null,
+    "_scriptCode": [
+      {
+        "lineNumber": 41219,
+        "content": "module.exports = __webpack_require__(/*! /Users/joe/Documents/Development/OSS/create-react-app/packages/react-scripts/template/src/index.js */130);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": []
+  },
+  {
+    "functionName": "__webpack_require__",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 660,
+    "columnNumber": 30,
+    "_originalFunctionName": "__webpack_require__",
+    "_originalFileName": "webpack:/webpack/bootstrap 623dfc2b357036468bb6",
+    "_originalLineNumber": 659,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 660,
+        "content": "/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 659,
+        "content": " \t\tmodules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "validateFormat",
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 709,
+    "columnNumber": 39,
+    "_originalFunctionName": "validateFormat",
+    "_originalFileName": "webpack:/webpack/bootstrap 623dfc2b357036468bb6",
+    "_originalLineNumber": 708,
+    "_originalColumnNumber": 0,
+    "_scriptCode": [
+      {
+        "lineNumber": 709,
+        "content": "/******/ \treturn hotCreateRequire(302)(__webpack_require__.s = 302);",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 708,
+        "content": " \treturn hotCreateRequire(302)(__webpack_require__.s = 302);",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": null,
+    "fileName": "http://localhost:3000/static/js/bundle.js",
+    "lineNumber": 712,
+    "columnNumber": 10,
+    "_originalFunctionName": null,
+    "_originalFileName": null,
+    "_originalLineNumber": null,
+    "_originalColumnNumber": null,
+    "_scriptCode": [
+      {
+        "lineNumber": 712,
+        "content": "/******/ ([",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": []
+  }
+]
--- a/packages/react-error-overlay/fixtures/bundle.mjs
+++ b/packages/react-error-overlay/fixtures/bundle.mjs
--- a/packages/react-error-overlay/fixtures/bundle.mjs.map
+++ b/packages/react-error-overlay/fixtures/bundle.mjs.map
--- a/packages/react-error-overlay/fixtures/bundle2.json
+++ b/packages/react-error-overlay/fixtures/bundle2.json
+[
+  {
+    "functionName": "div",
+    "fileName": "/static/js/bundle.js",
+    "lineNumber": 41466,
+    "columnNumber": null,
+    "_originalFunctionName": "div",
+    "_originalFileName": "B.js",
+    "_originalLineNumber": 8,
+    "_originalColumnNumber": null,
+    "_scriptCode": [
+      {
+        "lineNumber": 41466,
+        "content": "            'div',",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 8,
+        "content": "          <div>{v}</div>",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "B",
+    "fileName": "/static/js/bundle.js",
+    "lineNumber": 41395,
+    "columnNumber": null,
+    "_originalFunctionName": "B",
+    "_originalFileName": "A.js",
+    "_originalLineNumber": 6,
+    "_originalColumnNumber": null,
+    "_scriptCode": [
+      {
+        "lineNumber": 41395,
+        "content": "      return _react2.default.createElement(_B2.default, {",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 6,
+        "content": "    return (<B/>)",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "A",
+    "fileName": "/static/js/bundle.js",
+    "lineNumber": 26009,
+    "columnNumber": null,
+    "_originalFunctionName": "A",
+    "_originalFileName": "App.js",
+    "_originalLineNumber": 8,
+    "_originalColumnNumber": null,
+    "_scriptCode": [
+      {
+        "lineNumber": 26009,
+        "content": "      var Ac = _react2.default.createElement(_A2.default, {",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 8,
+        "content": "    const Ac = <A />",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "div",
+    "fileName": "/static/js/bundle.js",
+    "lineNumber": 26017,
+    "columnNumber": null,
+    "_originalFunctionName": "div",
+    "_originalFileName": "App.js",
+    "_originalLineNumber": 10,
+    "_originalColumnNumber": null,
+    "_scriptCode": [
+      {
+        "lineNumber": 26017,
+        "content": "        'div',",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 10,
+        "content": "      <div className=\"App\">",
+        "highlight": true
+      }
+    ]
+  },
+  {
+    "functionName": "App",
+    "fileName": "/static/js/bundle.js",
+    "lineNumber": 17412,
+    "columnNumber": null,
+    "_originalFunctionName": "App",
+    "_originalFileName": "index.js",
+    "_originalLineNumber": 6,
+    "_originalColumnNumber": null,
+    "_scriptCode": [
+      {
+        "lineNumber": 17412,
+        "content": "_reactDom2.default.render(_react2.default.createElement(_App2.default, {",
+        "highlight": true
+      }
+    ],
+    "_originalScriptCode": [
+      {
+        "lineNumber": 6,
+        "content": "ReactDOM.render(<App />, document.getElementById('root'));",
+        "highlight": true
+      }
+    ]
+  }
+]
--- a/packages/react-error-overlay/fixtures/bundle_u.mjs
+++ b/packages/react-error-overlay/fixtures/bundle_u.mjs
--- a/packages/react-error-overlay/fixtures/bundle_u.mjs.map
+++ b/packages/react-error-overlay/fixtures/bundle_u.mjs.map
--- a/packages/react-error-overlay/fixtures/inline.es6.mjs
+++ b/packages/react-error-overlay/fixtures/inline.es6.mjs
+function foo() {
+  console.log('bar')
+}
+
+export { foo }
--- a/packages/react-error-overlay/fixtures/inline.mjs
+++ b/packages/react-error-overlay/fixtures/inline.mjs
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function foo() {
+  console.log('bar');
+}
+
+exports.foo = foo;
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxTQUFTLEdBQVQsR0FBZTtBQUNiLFVBQVEsR0FBUixDQUFZLEtBQVo7QUFDRDs7UUFFUSxHLEdBQUEsRyIsImZpbGUiOiJzdGRvdXQiLCJzb3VyY2VzQ29udGVudCI6WyJmdW5jdGlvbiBmb28oKSB7XG4gIGNvbnNvbGUubG9nKCdiYXInKVxufVxuXG5leHBvcnQgeyBmb28gfVxuIl19
--- a/packages/react-error-overlay/fixtures/junk-inline.mjs
+++ b/packages/react-error-overlay/fixtures/junk-inline.mjs
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function foo() {
+  console.log('bar');
+}
+
+exports.foo = foo;
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64vlq,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxTQUFTLEdBQVQsR0FBZTtBQUNiLFVBQVEsR0FBUixDQUFZLEtBQVo7QUFDRDs7UUFFUSxHLEdBQUEsRyIsImZpbGUiOiJzdGRvdXQiLCJzb3VyY2VzQ29udGVudCI6WyJmdW5jdGlvbiBmb28oKSB7XG4gIGNvbnNvbGUubG9nKCdiYXInKVxufVxuXG5leHBvcnQgeyBmb28gfVxuIl19
--- a/packages/react-error-overlay/package.json
+++ b/packages/react-error-overlay/package.json
@@ -48,7 +48,8 @@
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.4.1",
    "flow-bin": "^0.46.0",
-    "jest": "19.x"
+    "jest": "19.x",
+    "jest-fetch-mock": "^1.1.1"
  },
  "jest": {
    "setupFiles": [

--- a/packages/react-error-overlay/src/__tests__/__snapshots__/lines-around.js.snap
+++ b/packages/react-error-overlay/src/__tests__/__snapshots__/lines-around.js.snap
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should return lines around from a string 1`] = `
+Array [
+  ScriptLine {
+    "content": "two",
+    "highlight": false,
+    "lineNumber": 2,
+  },
+  ScriptLine {
+    "content": "three",
+    "highlight": false,
+    "lineNumber": 3,
+  },
+  ScriptLine {
+    "content": "four",
+    "highlight": true,
+    "lineNumber": 4,
+  },
+  ScriptLine {
+    "content": "five",
+    "highlight": false,
+    "lineNumber": 5,
+  },
+  ScriptLine {
+    "content": "six",
+    "highlight": false,
+    "lineNumber": 6,
+  },
+]
+`;
+
+exports[`should return lines around from an array 1`] = `
+Array [
+  ScriptLine {
+    "content": "two",
+    "highlight": false,
+    "lineNumber": 2,
+  },
+  ScriptLine {
+    "content": "three",
+    "highlight": false,
+    "lineNumber": 3,
+  },
+  ScriptLine {
+    "content": "four",
+    "highlight": true,
+    "lineNumber": 4,
+  },
+  ScriptLine {
+    "content": "five",
+    "highlight": false,
+    "lineNumber": 5,
+  },
+  ScriptLine {
+    "content": "six",
+    "highlight": false,
+    "lineNumber": 6,
+  },
+]
+`;
--- a/packages/react-error-overlay/src/__tests__/__snapshots__/script-lines.js.snap
+++ b/packages/react-error-overlay/src/__tests__/__snapshots__/script-lines.js.snap
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`script line shape 1`] = `
+ScriptLine {
+  "content": "foobar",
+  "highlight": true,
+  "lineNumber": 5,
+}
+`;
+
+exports[`script line to provide default highlight 1`] = `
+ScriptLine {
+  "content": "foobar",
+  "highlight": false,
+  "lineNumber": 5,
+}
+`;
--- a/packages/react-error-overlay/src/__tests__/__snapshots__/stack-frame.js.snap
+++ b/packages/react-error-overlay/src/__tests__/__snapshots__/stack-frame.js.snap
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`proper empty shape 1`] = `
+StackFrame {
+  "_originalColumnNumber": null,
+  "_originalFileName": null,
+  "_originalFunctionName": null,
+  "_originalLineNumber": null,
+  "_originalScriptCode": null,
+  "_scriptCode": null,
+  "columnNumber": null,
+  "fileName": null,
+  "functionName": null,
+  "lineNumber": null,
+}
+`;
+
+exports[`proper full shape 1`] = `
+StackFrame {
+  "_originalColumnNumber": 13,
+  "_originalFileName": "test.js",
+  "_originalFunctionName": "apple",
+  "_originalLineNumber": 37,
+  "_originalScriptCode": null,
+  "_scriptCode": null,
+  "columnNumber": 37,
+  "fileName": "b.js",
+  "functionName": "a",
+  "lineNumber": 13,
+}
+`;
--- a/packages/react-error-overlay/src/__tests__/__snapshots__/unmapper.js.snap
+++ b/packages/react-error-overlay/src/__tests__/__snapshots__/unmapper.js.snap
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`default context & unfound source 1`] = `
+Array [
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": "B.js",
+    "_originalFunctionName": "div",
+    "_originalLineNumber": 8,
+    "_originalScriptCode": Array [
+      ScriptLine {
+        "content": "    return (",
+        "highlight": false,
+        "lineNumber": 5,
+      },
+      ScriptLine {
+        "content": "      <div>",
+        "highlight": false,
+        "lineNumber": 6,
+      },
+      ScriptLine {
+        "content": "        {[1, 2].map(v => (",
+        "highlight": false,
+        "lineNumber": 7,
+      },
+      ScriptLine {
+        "content": "          <div>{v}</div>",
+        "highlight": true,
+        "lineNumber": 8,
+      },
+      ScriptLine {
+        "content": "        ))}",
+        "highlight": false,
+        "lineNumber": 9,
+      },
+      ScriptLine {
+        "content": "      </div>",
+        "highlight": false,
+        "lineNumber": 10,
+      },
+      ScriptLine {
+        "content": "    )",
+        "highlight": false,
+        "lineNumber": 11,
+      },
+    ],
+    "_scriptCode": Array [
+      ScriptLine {
+        "content": "        },",
+        "highlight": false,
+        "lineNumber": 41463,
+      },
+      ScriptLine {
+        "content": "        [1, 2].map(function (v) {",
+        "highlight": false,
+        "lineNumber": 41464,
+      },
+      ScriptLine {
+        "content": "          return _react2.default.createElement(",
+        "highlight": false,
+        "lineNumber": 41465,
+      },
+      ScriptLine {
+        "content": "            'div',",
+        "highlight": true,
+        "lineNumber": 41466,
+      },
+      ScriptLine {
+        "content": "            {",
+        "highlight": false,
+        "lineNumber": 41467,
+      },
+      ScriptLine {
+        "content": "              __source: {",
+        "highlight": false,
+        "lineNumber": 41468,
+      },
+      ScriptLine {
+        "content": "                fileName: _jsxFileName,",
+        "highlight": false,
+        "lineNumber": 41469,
+      },
+    ],
+    "columnNumber": null,
+    "fileName": "/static/js/bundle.js",
+    "functionName": "div",
+    "lineNumber": 41466,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": "blabla.js",
+    "_originalFunctionName": "unknown",
+    "_originalLineNumber": 10,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": null,
+    "functionName": null,
+    "lineNumber": null,
+  },
+]
+`;
--- a/packages/react-error-overlay/src/__tests__/extract-source-map.js
+++ b/packages/react-error-overlay/src/__tests__/extract-source-map.js
+import { extractSourceMapUrl } from '../utils/getSourceMap';
+
+test('extracts last source map directive', async () => {
+  const res = await extractSourceMapUrl(
+    `test.js`,
+    `//# sourceMappingURL=test.js.map\nconsole.log('a')\n//# sourceMappingURL=bundle.js.map`
+  );
+  expect(res).toBe('bundle.js.map');
+});
+
+test('errors when no source map', async () => {
+  expect.assertions(1);
+
+  const testFileName = 'test.js';
+  try {
+    await extractSourceMapUrl(
+      testFileName,
+      `console.log('hi')\n\nconsole.log('bye')`
+    );
+  } catch (e) {
+    expect(e).toBe(`Cannot find a source map directive for ${testFileName}.`);
+  }
+});
--- a/packages/react-error-overlay/src/__tests__/get-source-map.js
+++ b/packages/react-error-overlay/src/__tests__/get-source-map.js
+import { getSourceMap } from '../utils/getSourceMap';
+import fs from 'fs';
+import { resolve } from 'path';
+
+test('finds an external source map', async () => {
+  const file = fs
+    .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs'))
+    .toString('utf8');
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs.map'))
+      .toString('utf8')
+  );
+
+  const sm = await getSourceMap('/', file);
+  expect(sm.getOriginalPosition(26122, 21)).toEqual({
+    line: 7,
+    column: 0,
+    source: 'webpack:///packages/react-scripts/template/src/App.js',
+  });
+});
+
+test('find an inline source map', async () => {
+  const sourceName = 'test.js';
+
+  const file = fs
+    .readFileSync(resolve(__dirname, '../../fixtures/inline.mjs'))
+    .toString('utf8');
+  const fileO = fs
+    .readFileSync(resolve(__dirname, '../../fixtures/inline.es6.mjs'))
+    .toString('utf8');
+
+  const sm = await getSourceMap('/', file);
+  expect(sm.getSources()).toEqual([sourceName]);
+  expect(sm.getSource(sourceName)).toBe(fileO);
+  expect(sm.getGeneratedPosition(sourceName, 5, 10)).toEqual({
+    line: 10,
+    column: 8,
+  });
+});
+
+test('error on a source map with unsupported encoding', async () => {
+  expect.assertions(2);
+
+  const file = fs
+    .readFileSync(resolve(__dirname, '../../fixtures/junk-inline.mjs'))
+    .toString('utf8');
+  try {
+    await getSourceMap('/', file);
+  } catch (e) {
+    expect(e instanceof Error).toBe(true);
+    expect(e.message).toBe(
+      'Sorry, non-base64 inline source-map encoding is not supported.'
+    );
+  }
+});
--- a/packages/react-error-overlay/src/__tests__/lines-around.js
+++ b/packages/react-error-overlay/src/__tests__/lines-around.js
+import { getLinesAround } from '../utils/getLinesAround';
+
+const arr = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
+
+test('should return lines around from a string', () => {
+  expect(getLinesAround(4, 2, arr)).toMatchSnapshot();
+});
+
+test('should return lines around from an array', () => {
+  expect(getLinesAround(4, 2, arr.join('\n'))).toMatchSnapshot();
+});
--- a/packages/react-error-overlay/src/__tests__/mapper.js
+++ b/packages/react-error-overlay/src/__tests__/mapper.js
+import { map } from '../utils/mapper';
+import { parse } from '../utils/parser';
+import fs from 'fs';
+import { resolve } from 'path';
+
+test('basic error; 0 context', async () => {
+  expect.assertions(1);
+  const error = 'TypeError: document.body.missing is not a function\n    at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)\n    at http://localhost:3000/static/js/bundle.js:30091:25\n    at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:29901:12)\n    at http://localhost:3000/static/js/bundle.js:30090:11\n    at CallbackQueue.notifyAll (http://localhost:3000/static/js/bundle.js:13256:22)\n    at ReactReconcileTransaction.close (http://localhost:3000/static/js/bundle.js:35124:26)\n    at ReactReconcileTransaction.closeAll (http://localhost:3000/static/js/bundle.js:7390:25)\n    at ReactReconcileTransaction.perform (http://localhost:3000/static/js/bundle.js:7337:16)\n    at batchedMountComponentIntoNode (http://localhost:3000/static/js/bundle.js:14204:15)\n    at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:7324:20)\n    at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:33900:26)\n    at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:2181:27)\n    at Object._renderNewRootComponent (http://localhost:3000/static/js/bundle.js:14398:18)\n    at Object._renderSubtreeIntoContainer (http://localhost:3000/static/js/bundle.js:14479:32)\n    at Object.render (http://localhost:3000/static/js/bundle.js:14500:23)\n    at Object.friendlySyntaxErrorLabel (http://localhost:3000/static/js/bundle.js:17287:20)\n    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n    at fn (http://localhost:3000/static/js/bundle.js:84:20)\n    at Object.<anonymous> (http://localhost:3000/static/js/bundle.js:41219:18)\n    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n    at validateFormat (http://localhost:3000/static/js/bundle.js:709:39)\n    at http://localhost:3000/static/js/bundle.js:712:10';
+
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs'))
+      .toString('utf8')
+  );
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs.map'))
+      .toString('utf8')
+  );
+  const frames = await map(parse(error), 0);
+  expect(frames).toEqual(
+    JSON.parse(
+      fs
+        .readFileSync(resolve(__dirname, '../../fixtures/bundle.json'))
+        .toString('utf8')
+    )
+  );
+});
+
+test('default context (3)', async () => {
+  expect.assertions(1);
+  const error = 'TypeError: document.body.missing is not a function\n    at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)';
+
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs'))
+      .toString('utf8')
+  );
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs.map'))
+      .toString('utf8')
+  );
+  const frames = await map(parse(error));
+  expect(frames).toEqual(
+    JSON.parse(
+      fs
+        .readFileSync(resolve(__dirname, '../../fixtures/bundle-default.json'))
+        .toString('utf8')
+    )
+  );
+});
+
+test('bad comes back same', async () => {
+  expect.assertions(2);
+  const error = 'TypeError: document.body.missing is not a function\n    at App.componentDidMount (A:1:2)';
+  const orig = parse(error);
+  expect(orig).toEqual([
+    {
+      _originalColumnNumber: null,
+      _originalFileName: null,
+      _originalFunctionName: null,
+      _originalLineNumber: null,
+      _originalScriptCode: null,
+      _scriptCode: null,
+      columnNumber: 2,
+      fileName: 'A',
+      functionName: 'App.componentDidMount',
+      lineNumber: 1,
+    },
+  ]);
+  const frames = await map(orig);
+  expect(frames).toEqual(orig);
+});
--- a/packages/react-error-overlay/src/__tests__/parser/__snapshots__/chrome.js.snap
+++ b/packages/react-error-overlay/src/__tests__/parser/__snapshots__/chrome.js.snap
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stack with eval 1`] = `
+Array [
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 18,
+    "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
+    "functionName": "e",
+    "lineNumber": 25,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 9,
+    "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
+    "functionName": "eval",
+    "lineNumber": 12,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 9,
+    "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
+    "functionName": "a",
+    "lineNumber": 8,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 7,
+    "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
+    "functionName": null,
+    "lineNumber": 32,
+  },
+]
+`;