title: Error cannot read property of undefined when trying to test a component that uses redux
body: <p>I have a class based Dashboard component</p>
  <pre><code>class Dashboard extends Component {
   ...
   render() {
     return sth
   }
  }
  
  const mapStateToProps = state =&gt; ({
    userId: state.mainState.userId,
    theme: state.mainState.theme,
    companyUsers: state.mainState.companyUsers,
    activities: state.mainState.activities,
    activityTypes: state.mainState.activityTypes,
    projects: state.mainState.projects
  });
  
  const mapDispatchToProps = {
    setMainValue: actions.setMainValue
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Dashboard));
  </code></pre>
  <p>Now I am trying to start testing the component using jest and react-testing-library.
  I have created a renderWithProvider function similar to this <a href="https://redux.js.org/recipes/writing-tests" rel="nofollow noreferrer">article</a> and trying to test using the custom render function. The only difference is that in the official redux website it returns the whole state on mapStateToProps as it is short while I am returning only specific variables.</p>
  <pre><code>function renderWithProvider(ui, { initialState, ...renderOptions } = {}) {
   const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
  
    function Wrapper({ children }) {
      return &lt;Provider store={store}&gt;{children}&lt;/Provider&gt;;
    }
  
    Wrapper.propTypes = {
      children: PropTypes.node.isRequired
    };
  
    return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
  }
  
  // re-export everything
  export * from '@testing-library/react';
  
  // override render method
  export { renderWithProvider };
  </code></pre>
  <p>When I render the component and run the test</p>
  <pre><code>import Dashboard from '.';
  
  import { renderWithProvider } from '../testUtils/renderWithProvider'
  
  test('should ', () =&gt; {
    renderWithProvider(&lt;Dashboard /&gt;, {
      initialState: {
        userId: 106,
        theme: 'light',
        companyUsers: [],
        activities: [],
        activityTypes: [],
        projects: []
      }
    });
  });
  </code></pre>
  <p>I get:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'userId' of undefined</p>
  <pre><code>  334 |
    335 | const mapStateToProps = state =&gt; ({
    336 |   userId: state.mainState.userId,
  </code></pre>
  </blockquote>
  <p>Any suggestions are welcome</p>
  <p><strong>Edit</strong>: I have tried also the following:</p>
  <pre><code>test('should ', () =&gt; {
    renderWithProvider(&lt;Dashboard /&gt;, {
      initialState: {
        mainState: {
          userId: 106,
          theme: 'light',
          companyUsers: [],
          activities: [],
          activityTypes: [],
          projects: []
        }
      }
    });
  });
  </code></pre>
  <p>but keep getting the same error</p>