fixing #67

single-spa · Mar 2, 2020 · 93e59ad · 93e59ad
1 parent bb07565
commit 93e59ad
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/single-spa-react.js b/src/single-spa-react.js
@@ -12,6 +12,7 @@ const defaultOpts = {
   rootComponent: null,
   loadRootComponent: null,
   suppressComponentDidCatchWarning: false,
+  domElements: {},
 
   // optional opts
   domElementGetter: null,
@@ -97,15 +98,15 @@ function mount(opts, props) {
     const elementToRender = SingleSpaContext ? opts.React.createElement(SingleSpaContext.Provider, {value: props}, rootComponentElement) : rootComponentElement
     const domElement = getRootDomEl(domElementGetter, props)
     const renderedComponent = reactDomRender({elementToRender, domElement, whenFinished, opts})
-    opts.domElement = domElement
+    opts.domElements[props.name] = domElement
   })
 }
 
 function unmount(opts, props) {
   return Promise
     .resolve()
     .then(() => {
-      opts.ReactDOM.unmountComponentAtNode(opts.domElement);
+      opts.ReactDOM.unmountComponentAtNode(opts.domElements[props.name]);
     })
 }
 
@@ -117,7 +118,7 @@ function update(opts, props) {
 
     const rootComponentElement = opts.React.createElement(opts.rootComponent, props)
     const elementToRender = SingleSpaContext ? opts.React.createElement(SingleSpaContext.Provider, {value: props}, rootComponentElement) : rootComponentElement
-    const renderedComponent = reactDomRender({elementToRender, domElement:opts.domElement, whenFinished, opts})
+    const renderedComponent = reactDomRender({elementToRender, domElement:opts.domElements[props.name], whenFinished, opts})
   })
 }
 

diff --git a/src/single-spa-react.test.js b/src/single-spa-react.test.js
@@ -143,6 +143,36 @@ describe('single-spa-react', () => {
       })
   })
 
+  it(`correctly handles two parcels using the same configuration`, () => {
+    let opts = {React, ReactDOM, rootComponent}
+
+    let props1 = {domElement: 'element1'}
+    let props2 = {domElement: 'element2'}
+    const lifecycles = singleSpaReact(opts)
+
+    return lifecycles
+      .bootstrap()
+      .then(() => lifecycles.mount(props1))
+      .then(() => lifecycles.unmount(props1))
+      .then(() => {
+        expect(ReactDOM.render).toHaveBeenCalled()
+        expect(ReactDOM.render.mock.calls[0][1]).toBe('element1')
+        expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalled()
+        expect(ReactDOM.unmountComponentAtNode.mock.calls.length).toBe(1)
+        expect(ReactDOM.unmountComponentAtNode.mock.calls[0][0]).toBe('element1')
+      })
+      // simulate another parcel using the same configuration
+      .then(() => lifecycles.bootstrap())
+      .then(() => lifecycles.mount(props2))
+      .then(() => lifecycles.unmount(props2))
+      .then(() => {
+        expect(ReactDOM.render).toHaveBeenCalled()
+        expect(ReactDOM.render.mock.calls[1][1]).toBe('element2')
+        expect(ReactDOM.unmountComponentAtNode.mock.calls.length).toBe(2)
+        expect(ReactDOM.unmountComponentAtNode.mock.calls[1][0]).toBe('element2')
+      })
+  })
+
   it(`allows you to provide a domElementGetter as an opt`, () => {
     const props = {why: 'hello', customProps: {}}
     const lifecycles = singleSpaReact({React, ReactDOM, rootComponent, domElementGetter})