Update single-spa-react.js (#94)

* Update single-spa-react.js Support ReactDOM.unstable_createRoot and ReactDOM.unstable_createBlockingRoot * Review feedback * Fix IE11 Co-authored-by: Joel Denning <[email protected]>
single-spa · Nov 9, 2020 · 06f3c22 · 06f3c22
1 parent c38dd22
commit 06f3c22
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 5 deletions.
diff --git a/.babelrc b/.babelrc
@@ -4,9 +4,12 @@
   "env": {
     "test": {
       "presets": [
-        ["@babel/preset-env", {
-          "targets": "current node"
-        }],
+        [
+          "@babel/preset-env",
+          {
+            "targets": "current node"
+          }
+        ],
         "@babel/preset-react"
       ]
     }

diff --git a/src/single-spa-react.js b/src/single-spa-react.js
@@ -217,8 +217,15 @@ function defaultDomElementGetter(props) {
 }
 
 function reactDomRender({ opts, elementToRender, domElement, whenFinished }) {
-  if (opts.renderType === "createRoot") {
-    return opts.ReactDOM.createRoot(domElement).render(
+  if (
+    [
+      "createRoot",
+      "unstable_createRoot",
+      "createBlockingRoot",
+      "unstable_createBlockingRoot",
+    ].indexOf(opts.renderType) >= 0
+  ) {
+    return opts.ReactDOM[opts.renderType](domElement).render(
       elementToRender,
       whenFinished
     );

diff --git a/src/single-spa-react.test.js b/src/single-spa-react.test.js
@@ -34,6 +34,14 @@ describe("single-spa-react", () => {
             }),
           };
         }),
+        unstable_createRoot: jest.fn((domEl) => {
+          return {
+            render: jest.fn((reactEl, cbk) => {
+              cbk();
+              return componentInstance;
+            }),
+          };
+        }),
         unmountComponentAtNode: jest.fn(),
       });
 
@@ -153,6 +161,48 @@ describe("single-spa-react", () => {
       });
   });
 
+  it(`mounts and unmounts a React component with a 'renderType' of 'unstable_createRoot'`, () => {
+    const props = { why: "hello" };
+    const lifecycles = singleSpaReact({
+      React,
+      ReactDOM,
+      rootComponent,
+      domElementGetter,
+      renderType: "unstable_createRoot",
+    });
+
+    const createRootRender = jest.fn();
+    ReactDOM.unstable_createRoot.mockImplementation((domEl) => {
+      return {
+        render: createRootRender.mockImplementation((reactEl, cbk) => {
+          cbk();
+          return componentInstance;
+        }),
+      };
+    });
+
+    return lifecycles
+      .bootstrap()
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(React.createElement).toHaveBeenCalled();
+        expect(React.createElement.mock.calls[0][0]).toEqual(rootComponent);
+        expect(React.createElement.mock.calls[0][1]).toEqual(props);
+        expect(ReactDOM.unstable_createRoot).toHaveBeenCalled();
+        expect(ReactDOM.unstable_createRoot.mock.calls[0][0]).toEqual(
+          domElement
+        );
+        expect(createRootRender.mock.calls[0][0]).toEqual(createdReactElement);
+        expect(typeof createRootRender.mock.calls[0][1]).toEqual("function");
+        return lifecycles.unmount(props);
+      })
+      .then(() => {
+        expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledWith(
+          domElement
+        );
+      });
+  });
+
   it(`chooses the parcel dom element over other dom element getters`, () => {
     const optsDomElementGetter = () => "optsDomElementGetter";
     let opts = {