title: Test React Component using Redux and react-testing-library
body: <p>I am new to testing redux connected components in React and trying to figure out how to test them. </p>
  
  <p>Currently I'm using react-testing-library and having trouble setting up the my renderWithRedux function to correctly setup redux. </p>
  
  <p>Here is a sample component:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { connect } from 'react-redux'
  
  class Sample extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
             ...
          }
      }
  
      componentDidMount() {
          //do stuff
          console.log(this.props)
      }
  
  
      render() {
  
          const { user } = this.props
  
          return(
              &lt;div className="sample"&gt;
                  {user.name}
              &lt;/div&gt;
          )
  
      }
  
  }
  
  const mapStateToProps = state =&gt; ({
      user: state.user
  })
  
  export default connect(mapStateToProps, {})(Sample);
  </code></pre>
  
  <p>Here is a sample test:</p>
  
  <pre><code>import React from 'react';
  import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import { render, cleanup } from 'react-testing-library';
  import Sample from '../components/sample/'
  
  const user = {
      id: 1,
      name: "John Smith"
  }}
  
  function reducer(state = user, action) {
      //dont need any actions at the moment
      switch (action.type) {
        default:
          return state
      }
  }
  
  function renderWithRedux(
      ui,
      { initialState, store = createStore(reducer, initialState) } = {}
      ) {
      return {
          ...render(&lt;Provider store={store}&gt;{ui}&lt;/Provider&gt;),
          store,
      }
  }
  
  afterEach(cleanup)
  
  test('&lt;Sample&gt; example text', () =&gt; {
      const { getByTestId, getByLabelText } = renderWithRedux(&lt;Sample /&gt;)
      expect(getByText(user.name))
  })  
  </code></pre>
  
  <p>The user prop value always results as undefined. I have re-written this a couple of ways but can't seem to get it to work. If I pass the user data directly as a prop to Sample component in the test, it still resolves to be undefined.</p>
  
  <p>I am learning from the tutorials and examples via the offical docs, like this one: <a href="https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-redux.js" rel="noreferrer">https://github.com/kentcdodds/react-testing-library/blob/master/examples/<strong>tests</strong>/react-redux.js</a> </p>
  
  <p>Any pointers, tips or solutions would be greatly appreciated!</p>