title: Testing an Authenticated Route using Jest/Enzyme
body: <p>I have a component that only displays when the route is authenticated. </p>
  
  <p>The way authentication is setup is with react-router v4 as an HOC:</p>
  
  <p>Root.js</p>
  
  <pre><code>import React from 'react';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import reduxThunk from 'redux-thunk';
  import reducers from './App/reducerIndex';
  
  const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
  
  export default ({children, initialState={}})=&gt;{
      return(
          &lt;Provider store={createStoreWithMiddleware(reducers, initialState)}&gt;
              {children}
          &lt;/Provider&gt;
      );
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { createStore, applyMiddleware } from 'redux';
  import reduxThunk from 'redux-thunk';
  import reducers from './App/reducerIndex';
  import { AUTH_USER } from './App/actionTypes';
  
  import App from './App/app';
  import '../style/css/custom.scss';
  
  const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
  const store = createStoreWithMiddleware(reducers);
  const token = localStorage.getItem('token');
  if (token) {
    store.dispatch({ type: AUTH_USER });
  }
  
  import Root from './root';
  ReactDOM.render(
      &lt;Root&gt;
          &lt;App id={token}/&gt;
      &lt;/Root&gt;,
      document.querySelector('.app')
  );
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>function PrivateRoute({ component: Component, auth, ...rest }) {
    return (
      &lt;Route
        {...rest}
        render={props =&gt;
          auth ? (&lt;div&gt;&lt;Component {...props} /&gt;&lt;/div&gt;) : (
            &lt;Redirect to={{ pathname: '/login', state: { from: props.location } }} /&gt;
          )
        }
      /&gt;
    );
  }
  
  function PublicRoute({ component: Component, auth, ...rest }) {
    return &lt;Route {...rest} render={props =&gt; (!auth ? &lt;Component {...props} /&gt; : &lt;Redirect to="/dashboard" /&gt;)} /&gt;;
  }
  
  class App extends Component {
    static contextTypes = {
      router: PropTypes.object,
    };
  
    render() {
      return (
        &lt;Router history={history} &gt;
          &lt;Switch&gt;
            &lt;PublicRoute auth={this.props.auth} path="/login" exact component={Login} /&gt;
            &lt;PrivateRoute auth={this.props.auth} path="/dashboard" exact component={Dashboard} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      auth: state.auth.authenticated,
    };
  }
  
  export default connect(
    mapStateToProps,
    null
  )(App);
  </code></pre>
  
  <p>This is currently how the dashboard test is set up</p>
  
  <p>dashboard test:</p>
  
  <pre><code>import React from 'react';
  import { mount } from 'enzyme';
  import Root from '../../../root';
  import Header from './header';
  import '../../../setupTests';
  import Dashboard from './dashboard';
  
  let wrapped;
  
  beforeEach(() =&gt; {
      const initialState = {
          auth: true
      };
      wrapped = mount(
          &lt;Root initialState={initialState}&gt;
              &lt;Dashboard /&gt;
          &lt;/Root&gt;
      );
  });
  
  
  describe('Dashboard', () =&gt; {
      console.log("The component is", wrapped)
      // make our assertion and what we expect to happen
      it('header component exists', () =&gt; {
          expect(wrapped.contains(&lt;Header /&gt;)).toBe(true)
      });
      it('renders without crashing', () =&gt; {
          expect(component.contains(&lt;Header /&gt;)).toBe(true)
  
        });
  
  });
  </code></pre>
  
  <p>Console.log keeps telling me the component is undefined. Would I have to wrap this around react-router? I an stumped. </p>