[fixed] Allow ReactDOM.createPortal to be mocked in tests

Fixes #553 - PR  #701

* Allow ReactDOM.createPortal to be mocked in tests (9cd0891)
* add testability tests (6a67946)
* linting (f29e7b0)
* more linting (5992f97)

Author: devrelm

specs/Modal.testability.spec.js

@@ -0,0 +1,20 @@
+/* eslint-env mocha */
+import ReactDOM from "react-dom";
+import sinon from "sinon";
+import { mcontent, renderModal, emptyDOM } from "./helper";
+
+export default () => {
+  afterEach("cleaned up all rendered modals", emptyDOM);
+
+  it("renders as expected, initially", () => {
+    const modal = renderModal({ isOpen: true }, "hello");
+    mcontent(modal).should.be.ok();
+  });
+
+  it("allows ReactDOM.createPortal to be overridden in real-time", () => {
+    const createPortalSpy = sinon.spy(ReactDOM, "createPortal");
+    renderModal({ isOpen: true }, "hello");
+    createPortalSpy.called.should.be.ok();
+    ReactDOM.createPortal.restore();
+  });
+};

specs/index.js

@@ -4,8 +4,10 @@ import ModalState from "./Modal.spec";
 import ModalEvents from "./Modal.events.spec";
 import ModalStyle from "./Modal.style.spec";
 import ModalHelpers from "./Modal.helpers.spec";
+import ModalTestability from "./Modal.testability.spec";
 
 describe("State", ModalState);
 describe("Style", ModalStyle);
 describe("Events", ModalEvents);
 describe("Helpers", ModalHelpers);
+describe("Testability", ModalTestability);

src/components/Modal.js

@@ -11,9 +11,11 @@ export const portalClassName = "ReactModalPortal";
 export const bodyOpenClassName = "ReactModal__Body--open";
 
 const isReact16 = ReactDOM.createPortal !== undefined;
-const createPortal = isReact16
-  ? ReactDOM.createPortal
-  : ReactDOM.unstable_renderSubtreeIntoContainer;
+
+const getCreatePortal = () =>
+  isReact16
+    ? ReactDOM.createPortal
+    : ReactDOM.unstable_renderSubtreeIntoContainer;
 
 function getParentElement(parentSelector) {
   return parentSelector();
@@ -180,6 +182,7 @@ class Modal extends Component {
   };
 
   renderPortal = props => {
+    const createPortal = getCreatePortal();
     const portal = createPortal(
       this,
       <ModalPortal defaultStyles={Modal.defaultStyles} {...props} />,
@@ -197,6 +200,7 @@ class Modal extends Component {
       this.node = document.createElement("div");
     }
 
+    const createPortal = getCreatePortal();
     return createPortal(
       <ModalPortal
         ref={this.portalRef}