title: How to test store state changes for redux connected HOC component using react-test-renderer?
body: <p>I am trying to test the follow component, which is based on a pretty common "ProtectedRoute" HOC/wrapper example on several React training sites. The basic concept is to wrap protected components at the <code>&lt;Route&gt;</code> level in order to redirect unauthenticated users.</p>
  
  <pre><code>//Authenticated.js
  import React from 'react';
  import PropTypes from 'prop-types';
  import { history } from 'store';
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';  
  
  export default function (Component) {  
    class Authenticated extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          authenticated: props.authenticated
        }
      }
  
      static getDerivedStateFromProps(props) {
        return {
          authenticated: props.authenticated                
        }
      }
  
      componentDidMount() {
        this._checkAndRedirect();
      }
  
      componentDidUpdate() {
        this._checkAndRedirect();
      }
  
      _checkAndRedirect() {
        const { authenticated, redirect } = this.props;
  
        if (!authenticated) {
          redirect();
        }
      }
  
      render() {
        return (
          &lt;div&gt;
            { this.props.authenticated ? &lt;Component {...this.props} /&gt; : null }
          &lt;/div&gt;
        );
      }
    }
  
    const mapStoreStateToProps = (store) =&gt; {
      return {
        authenticated: store.auth.authenticated
      };
    };
  
    const mapDispatchToProps = dispatch =&gt; bindActionCreators({
      redirect: () =&gt; history.push('/')
    }, dispatch)
  
    Authenticated.propTypes = {
      authenticated: PropTypes.bool,
      redirect: PropTypes.func.isRequired
    }
  
    return connect(
      mapStoreStateToProps, 
      mapDispatchToProps
    )(Authenticated);
  }
  </code></pre>
  
  <p>So far, I've written the following tests using <code>react-test-renderer</code> and <code>redux-mock-store</code>:</p>
  
  <pre><code>//Authenticated.spec.js
  import React from 'react';
  import { Provider } from 'react-redux';
  import { Router, Route } from 'react-router-dom';
  import { createMemoryHistory } from "history";
  import renderer from 'react-test-renderer';
  import mockStore from 'tests/mockStore';
  
  import Authenticated from 'components/common/Authenticated';
  import Home from 'components/Home';
  
  
  describe('Authenticated', () =&gt; {
    it('displays protected component if authenticated', () =&gt; {
      const AuthenticatedComponent = Authenticated(Home);
      const store = mockStore({ auth: { authenticated: true } });
      store.dispatch = jest.fn();
      const history = createMemoryHistory();
      history.push('/admin')
      const component = renderer.create(
        &lt;Provider store={store}&gt;
          &lt;Router history={history} &gt;
            &lt;AuthenticatedComponent /&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      );
      expect(component.toJSON()).toMatchSnapshot();
      expect(history.location.pathname).toBe("/admin");
    });
  
    it('redirects to login if not authenticated', () =&gt; {
      const AuthenticatedComponent = Authenticated(Home);
      const store = mockStore({ auth: { authenticated: false } });
      store.dispatch = jest.fn();
      const history = createMemoryHistory();
      const component = renderer.create(
        &lt;Provider store={store}&gt;
          &lt;Router history={history} &gt;
            &lt;AuthenticatedComponent /&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      );
      expect(component.toJSON()).toMatchSnapshot();
      expect(history.location.pathname).toBe("/");
    });
  });
  </code></pre>
  
  <p>Both of these tests run fine, and pass as expected, however I am now interested in testing following real world scenario:</p>
  
  <p><strong><em>A user is currently logged in, with <code>authenticated=true</code> in the store. After some time their cookie expires. For our example, let's say we periodically check the state of auth with server, and it triggers some action to fire, causing the store's new state to result in <code>authenticated=false</code>.</em></strong> </p>
  
  <p>Unless I just never came across an example, I am fairly certain <code>redux-mock-store</code> (even though it's literally named "mock-store") does not actually call any reducers to return a new "mock store" state when you call <code>store.dispatch(myAction())</code>. I am able to test the state changes in <code>myAction.spec.js</code>, but I am still unable to simulate the HOC receiving the updated state/prop in <code>getDerivedStateFromProps</code></p>
  
  <p>From what I can tell the tests I've written cover the two scenarios of where the component loads with <code>authenticated=true/false</code> initial states and that works as expected, but when I look at the coverage results, the <code>getDerivedStateFromProps</code> function is not being covered by these tests.</p>
  
  <p>How would I go about writing a test to simulate the change of <code>authentication</code> boolean in the store state and asserting that the <code>Authenticated</code> component received the change in <code>getDerivedStateFromProps</code> (previously <code>componentWillReceiveProps</code>) in order to make sure I am covering this in testing?</p>