title: Jest - enzyme testing warning: Failed prop type
body: <p>Doing testing with <code>jest</code> and <code>enzyme</code> and I think I am doing everything right but somehow getting the warning:</p>
  
  <blockquote>
    <p>Warning: Failed prop type: The prop <code>project</code> is marked as required in <code>ProjectPageUI</code>, but its value is <code>undefined</code>.
              in ProjectPageUI</p>
  </blockquote>
  
  <p>Here is how the test looks like:</p>
  
  <pre><code>test('shallow-render without crashing', () =&gt; {
    /*  
      project: PropTypes.object.isRequired,
     */
  
    const props = { 
      match: { params: {} },
    }
    const store = configureStore()(STATE_WITH_2_FAMILIES)
    shallow(&lt;ProjectPageUIComponent store={store} {...props} /&gt;)
  })
  </code></pre>
  
  <p>Inside <code>ProjectPageUI.jsx</code> I get <code>project</code> property using the selector:</p>
  
  <pre><code>const mapStateToProps = (state, ownProps) =&gt; ({
    project: getCurrentProject(state),
  })
  </code></pre>
  
  <p>Where <code>getCurrentProject</code> is the following:</p>
  
  <pre><code>export const getProjectsByGuid = state =&gt; state.projectsByGuid
  export const getProjectGuid = state =&gt; state.currentProjectGuid
  
  export const getCurrentProject = createSelector(
    getProjectsByGuid, getProjectGuid, (projectsByGuid, currentProjectGuid) =&gt; projectsByGuid[currentProjectGuid],
  )
  </code></pre>
  
  <p>In the <code>STATE_WITH_2_FAMILIES</code> I have both <code>projectsByGuid</code> and <code>currentProjectGuid</code> defined and <code>projectsByGuid</code> has the respective key for <code>currentProjectGuid</code> and the object defined. So, now I am wondering why is this warning happenning and how I should change my test, since I would expect it to have no issues at all: the selector gets <code>project</code> from the <code>state</code> and it should be <code>defined</code>.</p>
  
  <blockquote>
    <p>Clarification</p>
  </blockquote>
  
  <p>Thats how the <code>ProjectPageUI</code> looks like:</p>
  
  <pre><code>const ProjectPageUI = (props) =&gt; {
      ...
      ...
      return ( ... )
  }
  
  ProjectPageUI.propTypes = { 
    project: PropTypes.object.isRequired,
    ...
    ...
  }
  
  const mapStateToProps = (state, ownProps) =&gt; ({
    project: getCurrentProject(state),
    ...
    ...
  })
  
  export { ProjectPageUI as ProjectPageUIComponent }
  
  export default connect(mapStateToProps)(ProjectPageUI)
  </code></pre>