Testing an Authenticated Route using Jest/Enzyme - reactjs

Question

I have a component that only displays when the route is authenticated.
The way authentication is setup is with react-router v4 as an HOC:
Root.js
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={}})=>{
return(
<Provider store={createStoreWithMiddleware(reducers, initialState)}>
{children}
</Provider>
);
}
index.js
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(
<Root>
<App id={token}/>
</Root>,
document.querySelector('.app')
);
App.js
function PrivateRoute({ component: Component, auth, ...rest }) {
return (
<Route
{...rest}
render={props =>
auth ? (<div><Component {...props} /></div>) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
}
/>
);
}
function PublicRoute({ component: Component, auth, ...rest }) {
return <Route {...rest} render={props => (!auth ? <Component {...props} /> : <Redirect to="/dashboard" />)} />;
}
class App extends Component {
static contextTypes = {
router: PropTypes.object,
};
render() {
return (
<Router history={history} >
<Switch>
<PublicRoute auth={this.props.auth} path="/login" exact component={Login} />
<PrivateRoute auth={this.props.auth} path="/dashboard" exact component={Dashboard} />
</Switch>
</Router>
);
}
}
function mapStateToProps(state) {
return {
auth: state.auth.authenticated,
};
}
export default connect(
mapStateToProps,
null
)(App);
This is currently how the dashboard test is set up
dashboard test:
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(() => {
const initialState = {
auth: true
};
wrapped = mount(
<Root initialState={initialState}>
<Dashboard />
</Root>
);
});
describe('Dashboard', () => {
console.log("The component is", wrapped)
// make our assertion and what we expect to happen
it('header component exists', () => {
expect(wrapped.contains(<Header />)).toBe(true)
});
it('renders without crashing', () => {
expect(component.contains(<Header />)).toBe(true)
});
});
Console.log keeps telling me the component is undefined. Would I have to wrap this around react-router? I an stumped.