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
2026-01-12 22:46:30 +08:00 · 2017-05-11 09:00:20 -04:00
parent 69590775ce
commit 942cf6230c
32 changed files with 84445 additions and 1 deletions
--- a/packages/react-error-overlay/fixtures/bundle-default.json
+++ b/packages/react-error-overlay/fixtures/bundle-default.json
@@ -0,0 +1,86 @@
+[
+  {
+    "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
@@ -0,0 +1,518 @@
+[
+  {
+    "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
@@ -0,0 +1,122 @@
+[
+  {
+    "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
@@ -0,0 +1,5 @@
+function foo() {
+  console.log('bar')
+}
+
+export { foo }
--- a/packages/react-error-overlay/fixtures/inline.mjs
+++ b/packages/react-error-overlay/fixtures/inline.mjs
@@ -0,0 +1,12 @@
+'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
@@ -0,0 +1,12 @@
+'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
@@ -0,0 +1,61 @@
+// 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
@@ -0,0 +1,17 @@
+// 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
@@ -0,0 +1,31 @@
+// 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
@@ -0,0 +1,102 @@
+// 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
@@ -0,0 +1,23 @@
+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
@@ -0,0 +1,56 @@
+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
@@ -0,0 +1,11 @@
+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
@@ -0,0 +1,74 @@
+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
@@ -0,0 +1,54 @@
+// 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,
+  },
+]
+`;
--- a/packages/react-error-overlay/src/tests/parser/snapshots/firefox.js.snap
+++ b/packages/react-error-overlay/src/tests/parser/snapshots/firefox.js.snap
@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`eval 1 1`] = `
+Array [
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///C:/example.html",
+    "functionName": "test1",
+    "lineNumber": 7,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///C:/example.html",
+    "functionName": "test2",
+    "lineNumber": 7,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 6,
+    "fileName": "file:///C:/example.html",
+    "functionName": "test3",
+    "lineNumber": 7,
+  },
+]
+`;
+
+exports[`eval 2 1`] = `
+Array [
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///C:/example.html",
+    "functionName": "anonymous",
+    "lineNumber": 7,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 6,
+    "fileName": "file:///C:/example.html",
+    "functionName": null,
+    "lineNumber": 7,
+  },
+]
+`;
+
+exports[`stack with eval 1`] = `
+Array [
+  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": "e",
+    "lineNumber": 25,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
+    "functionName": "eval",
+    "lineNumber": 17,
+  },
+  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,
+  },
+]
+`;
+
+exports[`v14 to v29 1`] = `
+Array [
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///C:/example.html",
+    "functionName": "trace",
+    "lineNumber": 9,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///C:/example.html",
+    "functionName": "b",
+    "lineNumber": 16,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///C:/example.html",
+    "functionName": "a",
+    "lineNumber": 19,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "file:///C:/example.html",
+    "functionName": null,
+    "lineNumber": 21,
+  },
+]
+`;
+
+exports[`v30+ 1`] = `
+Array [
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 17,
+    "fileName": "file:///C:/example.html",
+    "functionName": "trace",
+    "lineNumber": 9,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 13,
+    "fileName": "file:///C:/example.html",
+    "functionName": "b",
+    "lineNumber": 16,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 13,
+    "fileName": "file:///C:/example.html",
+    "functionName": "a",
+    "lineNumber": 19,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": 9,
+    "fileName": "file:///C:/example.html",
+    "functionName": null,
+    "lineNumber": 21,
+  },
+]
+`;
--- a/packages/react-error-overlay/src/tests/parser/snapshots/react.js.snap
+++ b/packages/react-error-overlay/src/tests/parser/snapshots/react.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`15.y.z 1`] = `
+Array [
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "FileA.js",
+    "functionName": "div",
+    "lineNumber": 9,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "App.js",
+    "functionName": "FileA",
+    "lineNumber": 9,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "App.js",
+    "functionName": "div",
+    "lineNumber": 8,
+  },
+  StackFrame {
+    "_originalColumnNumber": null,
+    "_originalFileName": null,
+    "_originalFunctionName": null,
+    "_originalLineNumber": null,
+    "_originalScriptCode": null,
+    "_scriptCode": null,
+    "columnNumber": null,
+    "fileName": "index.js",
+    "functionName": "App",
+    "lineNumber": 7,
+  },
+]
+`;
--- a/packages/react-error-overlay/src/tests/parser/snapshots/safari.js.snap
+++ b/packages/react-error-overlay/src/tests/parser/snapshots/safari.js.snap
@@ -0,0 +1,42 @@
+// 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": 10,
+    "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": 8,
+    "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
+    "functionName": "global code",
+    "lineNumber": 32,
+  },
+]
+`;
--- a/packages/react-error-overlay/src/tests/parser/chrome.js
+++ b/packages/react-error-overlay/src/tests/parser/chrome.js
@@ -0,0 +1,13 @@
+import { parse } from '../../utils/parser';
+
+test('stack with eval', () => {
+  expect(
+    parse(
+      `TypeError: window[f] is not a function
+    at e (file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:25:18)
+    at eval (eval at c (file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:12:9), <anonymous>:1:1)
+    at a (file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:8:9)
+    at file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:32:7`
+    )
+  ).toMatchSnapshot();
+});
--- a/packages/react-error-overlay/src/tests/parser/firefox.js
+++ b/packages/react-error-overlay/src/tests/parser/firefox.js
@@ -0,0 +1,53 @@
+import { parse } from '../../utils/parser';
+
+test('eval 1', () => {
+  expect(
+    parse(
+      `test1@file:///C:/example.html line 7 > eval line 1 > eval:1:1
+test2@file:///C:/example.html line 7 > eval:1:1
+test3@file:///C:/example.html:7:6`.split('\n')
+    )
+  ).toMatchSnapshot();
+});
+
+test('eval 2', () => {
+  expect(
+    parse({
+      stack: `anonymous@file:///C:/example.html line 7 > Function:1:1
+@file:///C:/example.html:7:6`,
+    })
+  ).toMatchSnapshot();
+});
+
+test('stack with eval', () => {
+  expect(
+    parse(
+      `e@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:25:9
+@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html line 17 > eval:1:1
+a@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:8:9
+@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:32:7`
+    )
+  ).toMatchSnapshot();
+});
+
+test('v14 to v29', () => {
+  expect(
+    parse(
+      `trace@file:///C:/example.html:9
+b@file:///C:/example.html:16
+a@file:///C:/example.html:19
+@file:///C:/example.html:21`
+    )
+  ).toMatchSnapshot();
+});
+
+test('v30+', () => {
+  expect(
+    parse(
+      `trace@file:///C:/example.html:9:17
+b@file:///C:/example.html:16:13
+a@file:///C:/example.html:19:13
+@file:///C:/example.html:21:9`
+    )
+  ).toMatchSnapshot();
+});
--- a/packages/react-error-overlay/src/tests/parser/generic.js
+++ b/packages/react-error-overlay/src/tests/parser/generic.js
@@ -0,0 +1,23 @@
+import { parse } from '../../utils/parser';
+
+test('throws on null', () => {
+  expect.assertions(2);
+  try {
+    parse(null);
+  } catch (e) {
+    expect(e instanceof Error).toBe(true);
+    expect(e.message).toBe('You cannot pass a null object.');
+  }
+});
+
+test('throws on unparsable', () => {
+  expect.assertions(2);
+  try {
+    parse({});
+  } catch (e) {
+    expect(e instanceof Error).toBe(true);
+    expect(e.message).toBe(
+      'The error you provided does not contain a stack trace.'
+    );
+  }
+});
--- a/packages/react-error-overlay/src/tests/parser/react.js
+++ b/packages/react-error-overlay/src/tests/parser/react.js
@@ -0,0 +1,13 @@
+import { parse } from '../../utils/parser';
+
+test('15.y.z', () => {
+  expect(
+    parse(
+      `Warning: Each child in array should have a unique "key" prop. Check render method of \`FileA\`.
+     in div (at FileA.js:9)
+     in FileA (at App.js:9)
+     in div (at App.js:8)
+     in App (at index.js:7)`
+    )
+  ).toMatchSnapshot();
+});
--- a/packages/react-error-overlay/src/tests/parser/safari.js
+++ b/packages/react-error-overlay/src/tests/parser/safari.js
@@ -0,0 +1,13 @@
+import { parse } from '../../utils/parser';
+
+test('stack with eval', () => {
+  expect(
+    parse(
+      `e@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:25:18
+eval code
+eval@[native code]
+a@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:8:10
+global code@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:32:8`
+    )
+  ).toMatchSnapshot();
+});
--- a/packages/react-error-overlay/src/tests/script-lines.js
+++ b/packages/react-error-overlay/src/tests/script-lines.js
@@ -0,0 +1,9 @@
+import { ScriptLine } from '../utils/stack-frame';
+
+test('script line shape', () => {
+  expect(new ScriptLine(5, 'foobar', true)).toMatchSnapshot();
+});
+
+test('script line to provide default highlight', () => {
+  expect(new ScriptLine(5, 'foobar')).toMatchSnapshot();
+});
--- a/packages/react-error-overlay/src/tests/setupJest.js
+++ b/packages/react-error-overlay/src/tests/setupJest.js
@@ -0,0 +1 @@
+global.fetch = require('jest-fetch-mock');
--- a/packages/react-error-overlay/src/tests/stack-frame.js
+++ b/packages/react-error-overlay/src/tests/stack-frame.js
@@ -0,0 +1,29 @@
+import { StackFrame } from '../utils/stack-frame';
+
+test('proper empty shape', () => {
+  const empty = new StackFrame();
+  expect(empty).toMatchSnapshot();
+
+  expect(empty.getFunctionName()).toBe(null);
+  expect(empty.getSource()).toBe('');
+  expect(empty.toString()).toBe('');
+});
+
+test('proper full shape', () => {
+  const empty = new StackFrame(
+    'a',
+    'b.js',
+    13,
+    37,
+    undefined,
+    'apple',
+    'test.js',
+    37,
+    13
+  );
+  expect(empty).toMatchSnapshot();
+
+  expect(empty.getFunctionName()).toBe('a');
+  expect(empty.getSource()).toBe('b.js:13:37');
+  expect(empty.toString()).toBe('a (b.js:13:37)');
+});
--- a/packages/react-error-overlay/src/tests/unmapper.js
+++ b/packages/react-error-overlay/src/tests/unmapper.js
@@ -0,0 +1,65 @@
+import { unmap } from '../utils/unmapper';
+import { parse } from '../utils/parser';
+import fs from 'fs';
+import { resolve } from 'path';
+
+test('basic warning', async () => {
+  expect.assertions(2);
+  const error = `Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`B\`. See https://fb.me/react-warning-keys for more information.
+    in div (at B.js:8)
+    in B (at A.js:6)
+    in A (at App.js:8)
+    in div (at App.js:10)
+    in App (at index.js:6)`;
+
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs'))
+      .toString('utf8')
+  );
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs.map'))
+      .toString('utf8')
+  );
+  const frames = await unmap('/static/js/bundle.js', parse(error), 0);
+
+  const expected = JSON.parse(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle2.json'))
+      .toString('utf8')
+  );
+  expect(frames).toEqual(expected);
+
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs'))
+      .toString('utf8')
+  );
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs.map'))
+      .toString('utf8')
+  );
+  expect(await unmap('/static/js/bundle.js', expected)).toEqual(expected);
+});
+
+test('default context & unfound source', async () => {
+  expect.assertions(1);
+  const error = `Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`B\`. See https://fb.me/react-warning-keys for more information.
+    in div (at B.js:8)
+    in unknown (at blabla.js:10)`;
+
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs'))
+      .toString('utf8')
+  );
+  fetch.mockResponseOnce(
+    fs
+      .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs.map'))
+      .toString('utf8')
+  );
+  const frames = await unmap('/static/js/bundle.js', parse(error));
+  expect(frames).toMatchSnapshot();
+});