Updated: Support React-Hot-Loader compatibility (#1168)

* fix: react-hot-loader compatibility

* Fix test runner breaking

The test runner script tried to pass the Jest config as
stringified JSON, but that was breaking for me somehow.

Sidestepped the problem by writing the settings to disk instead
and pointing Jest to that file.

Author: markerikson

.gitignore

@@ -10,6 +10,7 @@ test/**/lcov.info
 test/**/lcov-report
 test/react/*/test/**/*.spec.js
 test/react/**/src
+test/jest-config.json
 lcov.info
 
 lib/core/metadata.js

src/components/connectAdvanced.js

@@ -120,7 +120,6 @@ export default function connectAdvanced(
     const { pure } = connectOptions
 
     let OuterBaseComponent = Component
-    let FinalWrappedComponent = WrappedComponent
 
     if (pure) {
       OuterBaseComponent = PureComponent
@@ -131,15 +130,25 @@ export default function connectAdvanced(
       let lastState
       let lastDerivedProps
       let lastStore
+      let lastSelectorFactoryOptions
       let sourceSelector
 
-      return function selectDerivedProps(state, props, store) {
+      return function selectDerivedProps(
+        state,
+        props,
+        store,
+        selectorFactoryOptions
+      ) {
         if (pure && lastProps === props && lastState === state) {
           return lastDerivedProps
         }
 
-        if (store !== lastStore) {
+        if (
+          store !== lastStore ||
+          lastSelectorFactoryOptions !== selectorFactoryOptions
+        ) {
           lastStore = store
+          lastSelectorFactoryOptions = selectorFactoryOptions
           sourceSelector = selectorFactory(
             store.dispatch,
             selectorFactoryOptions
@@ -157,14 +166,23 @@ export default function connectAdvanced(
     }
 
     function makeChildElementSelector() {
-      let lastChildProps, lastForwardRef, lastChildElement
+      let lastChildProps, lastForwardRef, lastChildElement, lastComponent
 
-      return function selectChildElement(childProps, forwardRef) {
-        if (childProps !== lastChildProps || forwardRef !== lastForwardRef) {
+      return function selectChildElement(
+        WrappedComponent,
+        childProps,
+        forwardRef
+      ) {
+        if (
+          childProps !== lastChildProps ||
+          forwardRef !== lastForwardRef ||
+          lastComponent !== WrappedComponent
+        ) {
           lastChildProps = childProps
           lastForwardRef = forwardRef
+          lastComponent = WrappedComponent
           lastChildElement = (
-            <FinalWrappedComponent {...childProps} ref={forwardRef} />
+            <WrappedComponent {...childProps} ref={forwardRef} />
           )
         }
 
@@ -182,7 +200,14 @@ export default function connectAdvanced(
         )
         this.selectDerivedProps = makeDerivedPropsSelector()
         this.selectChildElement = makeChildElementSelector()
-        this.renderWrappedComponent = this.renderWrappedComponent.bind(this)
+        this.indirectRenderWrappedComponent = this.indirectRenderWrappedComponent.bind(
+          this
+        )
+      }
+
+      indirectRenderWrappedComponent(value) {
+        // calling renderWrappedComponent on prototype from indirectRenderWrappedComponent bound to `this`
+        return this.renderWrappedComponent(value)
       }
 
       renderWrappedComponent(value) {
@@ -206,10 +231,15 @@ export default function connectAdvanced(
         let derivedProps = this.selectDerivedProps(
           storeState,
           wrapperProps,
-          store
+          store,
+          selectorFactoryOptions
         )
 
-        return this.selectChildElement(derivedProps, forwardedRef)
+        return this.selectChildElement(
+          WrappedComponent,
+          derivedProps,
+          forwardedRef
+        )
       }
 
       render() {
@@ -222,7 +252,7 @@ export default function connectAdvanced(
 
         return (
           <ContextToUse.Consumer>
-            {this.renderWrappedComponent}
+            {this.indirectRenderWrappedComponent}
           </ContextToUse.Consumer>
         )
       }

test/run-tests.js

@@ -1,4 +1,6 @@
 const npmRun = require('npm-run')
+const fs = require('fs')
+const path = require('path')
 const LATEST_VERSION = '16.6'
 const version = process.env.REACT || LATEST_VERSION
 
@@ -27,7 +29,13 @@ if (version.toLowerCase() === 'all') {
   }
 }
 
+const configFilePath = path.join(__dirname, 'jest-config.json')
+
+fs.writeFileSync(configFilePath, JSON.stringify(jestConfig))
+
+const commandLine = `jest -c "${configFilePath}" ${process.argv.slice(2).join(' ')}`
+
 npmRun.execSync(
-  `jest -c '${JSON.stringify(jestConfig)}' ${process.argv.slice(2).join(' ')}`,
+  commandLine,
   { stdio: 'inherit' }
 )