Fixing issue with customProps prop. Resolves #82. (#83)

* Fixing issue with customProps prop. Resolves #82. * Self review
single-spa · Jul 23, 2020 · b046baa · b046baa
1 parent 4294a8a
commit b046baa
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 19 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,14 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": ["@babel/plugin-proposal-class-properties"],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": "current node"
+        }],
+        "@babel/preset-react"
+      ]
+    }
+  }
 }
diff --git a/package.json b/package.json
@@ -21,9 +21,9 @@
   ],
   "scripts": {
     "build": "rollup -c",
+    "test": "cross-env BABEL_ENV=test jest --config jest.json",
     "watch-build": "rollup -cw",
-    "test": "jest --config jest.json",
-    "watch-tests": "jest --watch --config jest.json",
+    "watch-tests": "cross-env BABEL_ENV=test jest --watch --config jest.json",
     "format": "prettier --write './**/*'",
     "coverage": "jest --coverage --config jest.json",
     "prepublishOnly": "yarn build"
@@ -64,6 +64,7 @@
     "@babel/preset-react": "^7.9.4",
     "@rollup/plugin-babel": "^5.0.4",
     "babel-jest": "^25.2.6",
+    "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "husky": "^4.2.3",

diff --git a/src/single-spa-react.js b/src/single-spa-react.js
@@ -184,7 +184,6 @@ function atLeastReact16(React) {
 }
 
 function chooseDomElementGetter(opts, props) {
-  props = props && props.customProps ? props.customProps : props;
   if (props.domElement) {
     return () => props.domElement;
   } else if (props.domElementGetter) {

diff --git a/src/single-spa-react.test.js b/src/single-spa-react.test.js
@@ -55,7 +55,7 @@ describe("single-spa-react", () => {
   });
 
   it(`mounts and unmounts a React component, passing through the single-spa props`, () => {
-    const props = { why: "hello", customProps: {} };
+    const props = { why: "hello" };
     const lifecycles = singleSpaReact({
       React,
       ReactDOM,
@@ -84,7 +84,7 @@ describe("single-spa-react", () => {
   });
 
   it(`mounts and unmounts a React component with a 'renderType' of 'hydrate'`, () => {
-    const props = { why: "hello", customProps: {} };
+    const props = { why: "hello" };
     const lifecycles = singleSpaReact({
       React,
       ReactDOM,
@@ -114,7 +114,7 @@ describe("single-spa-react", () => {
   });
 
   it(`mounts and unmounts a React component with a 'renderType' of 'createRoot'`, () => {
-    const props = { why: "hello", customProps: {} };
+    const props = { why: "hello" };
     const lifecycles = singleSpaReact({
       React,
       ReactDOM,
@@ -164,10 +164,8 @@ describe("single-spa-react", () => {
     let propsDomElementGetter = () => "propsDomElementGetter";
     let propsDomElement = () => "propsDomElement";
     let props = {
-      customProps: {
-        domElement: propsDomElement,
-        domElementGetter: propsDomElementGetter,
-      },
+      domElement: propsDomElement,
+      domElementGetter: propsDomElementGetter,
     };
 
     const lifecycles = singleSpaReact(opts);
@@ -221,7 +219,7 @@ describe("single-spa-react", () => {
   });
 
   it(`allows you to provide a domElementGetter as an opt`, () => {
-    const props = { why: "hello", customProps: {} };
+    const props = { why: "hello" };
     const lifecycles = singleSpaReact({
       React,
       ReactDOM,
@@ -233,8 +231,8 @@ describe("single-spa-react", () => {
     // Doesn't throw
   });
 
-  it(`allows you to provide a domElementGetter as a customProps`, () => {
-    const props = { why: "hello", customProps: { domElementGetter } };
+  it(`allows you to provide a domElementGetter as a prop`, () => {
+    const props = { why: "hello", domElementGetter };
     const lifecycles = singleSpaReact({ React, ReactDOM, rootComponent });
 
     return lifecycles.bootstrap().then(() => lifecycles.mount(props));
@@ -277,7 +275,7 @@ describe("single-spa-react", () => {
   it(`warns if you are using react 16 but don't implement componentDidCatch`, () => {
     delete componentInstance.componentDidCatch;
     React.version = "16.2.0";
-    const props = { why: "hello", customProps: {} };
+    const props = { why: "hello" };
     const lifecycles = singleSpaReact({
       React,
       ReactDOM,
@@ -295,7 +293,7 @@ describe("single-spa-react", () => {
   it(`does not warn if you are using react 15 but don't implement componentDidCatch`, () => {
     delete componentInstance.componentDidCatch;
     React.version = "15.4.1";
-    const props = { why: "hello", customProps: {} };
+    const props = { why: "hello" };
     const lifecycles = singleSpaReact({
       React,
       ReactDOM,
@@ -309,6 +307,22 @@ describe("single-spa-react", () => {
       .then(() => expect(console.warn).not.toHaveBeenCalled());
   });
 
+  // https://github.com/single-spa/single-spa/issues/604
+  it(`does not throw an error if a customProps prop is provided`, async () => {
+    const parcelConfig = singleSpaReact({
+      React,
+      ReactDOM,
+      rootComponent,
+    });
+    const normalProps = { foo: "bar", name: "app1" };
+    await parcelConfig.bootstrap(normalProps);
+    await parcelConfig.mount(normalProps);
+
+    const unusualProps = { name: "app2", customProps: { foo: "bar" } };
+    await parcelConfig.bootstrap(unusualProps);
+    await parcelConfig.mount(unusualProps);
+  });
+
   describe("error boundaries", () => {
     let originalWarn;
     beforeEach(() => {
@@ -321,7 +335,7 @@ describe("single-spa-react", () => {
     });
 
     it(`should not log a warning`, () => {
-      const props = { why: "hello", customProps: {} };
+      const props = { why: "hello" };
       const lifecycles = singleSpaReact({
         React,
         ReactDOM,
@@ -340,7 +354,7 @@ describe("single-spa-react", () => {
     });
 
     it(`should log a warning`, () => {
-      const props = { why: "hello", customProps: {} };
+      const props = { why: "hello" };
       const lifecycles = singleSpaReact({
         React,
         ReactDOM,
@@ -357,7 +371,7 @@ describe("single-spa-react", () => {
     });
 
     it(`should log a warning`, () => {
-      const props = { why: "hello", customProps: {} };
+      const props = { why: "hello" };
       const lifecycles = singleSpaReact({
         React,
         ReactDOM,

diff --git a/yarn.lock b/yarn.lock
@@ -1919,6 +1919,13 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
+cross-env@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
+  integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -1939,6 +1946,15 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cross-spawn@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"