Shows more helpful error when connect() is passed invalid args. (#554)

Author: jimbolla

src/components/connectAdvanced.js

@@ -85,6 +85,7 @@ export default function connectAdvanced(
       storeKey,
       withRef,
       displayName,
+      wrappedComponentName,
       WrappedComponent
     }
 

src/connect/connect.js

@@ -22,12 +22,15 @@ import defaultSelectorFactory from './selectorFactory'
   it receives new props or store state.
  */
 
-function match(arg, factories) {
+function match(arg, factories, name) {
   for (let i = factories.length - 1; i >= 0; i--) {
     const result = factories[i](arg)
     if (result) return result
   }
-  return undefined
+
+  return (dispatch, options) => {
+    throw new Error(`Invalid value of type ${typeof arg} for ${name} argument when connecting component ${options.wrappedComponentName}.`)
+  }
 }
 
 function strictEqual(a, b) { return a === b }
@@ -54,9 +57,9 @@ export function createConnect({
       ...extraOptions
     } = {}
   ) {
-    const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories)
-    const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories)
-    const initMergeProps = match(mergeProps, mergePropsFactories)
+    const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
+    const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps')
+    const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')
 
     return connectHOC(selectorFactory, {
       // used in error messages

test/components/connect.spec.js

@@ -24,6 +24,9 @@ describe('React', () => {
         return Children.only(this.props.children)
       }
     }
+    ProviderMock.childContextTypes = {
+      store: PropTypes.object.isRequired
+    }
 
     class ContextBoundStore {
       constructor(reducer) {
@@ -49,10 +52,6 @@ describe('React', () => {
       }
     }
 
-    ProviderMock.childContextTypes = {
-      store: PropTypes.object.isRequired
-    }
-
     function stringBuilder(prev = '', action) {
       return action.type === 'APPEND'
         ? prev + action.body
@@ -2083,6 +2082,48 @@ describe('React', () => {
       store.dispatch({ type: 'ACTION' })
       expect(renderCount).toBe(rendersBeforeStateChange + 1)
     })
-  })
 
+    function renderWithBadConnect(Component) {
+      const store = createStore(() => ({}))
+
+      try {
+        TestUtils.renderIntoDocument(
+          <ProviderMock store={store}>
+            <Component pass="through" />
+          </ProviderMock>
+        )
+        return null
+      } catch (error) {
+        return error.message
+      }
+    }
+    it('should throw a helpful error for invalid mapStateToProps arguments', () => {
+      @connect('invalid')
+      class InvalidMapState extends React.Component { render() { return <div></div> } }
+
+      const error = renderWithBadConnect(InvalidMapState)
+      expect(error).toInclude('string')
+      expect(error).toInclude('mapStateToProps')
+      expect(error).toInclude('InvalidMapState')
+    })
+    it('should throw a helpful error for invalid mapDispatchToProps arguments', () => {
+      @connect(null, 'invalid')
+      class InvalidMapDispatch extends React.Component { render() { return <div></div> } }
+
+      const error = renderWithBadConnect(InvalidMapDispatch)
+      expect(error).toInclude('string')
+      expect(error).toInclude('mapDispatchToProps')
+      expect(error).toInclude('InvalidMapDispatch')
+    })
+    it('should throw a helpful error for invalid mergeProps arguments', () => {
+      @connect(null, null, 'invalid')
+      class InvalidMerge extends React.Component { render() { return <div></div> } }
+
+      const error = renderWithBadConnect(InvalidMerge)
+      expect(error).toInclude('string')
+      expect(error).toInclude('mergeProps')
+      expect(error).toInclude('InvalidMerge')
+    })
+
+  })
 })