With react-router, how do you test for a connected component? - unit-testing

Question

I'm using enzyme and code for my testing. I'm in the process of trying to test my routes produced by react-router-dom. I'm not have any issues as long as the route is an undecorated, 'non-connected' route. But the tests blows up if the route is a 'connected' redux route. First here is my Routes component.
Note that the <PrivateRoute /> is just a HOC that first checks if a user is authorized before rending the route. For the sake of what I'm trying to test, you can view them as any other <Route /> from react-router-dom.
const Routes = () => {
return (
<Switch>
<Route exact path='/' component={WelcomeScreen} />
<Route path='/auth' component={Authorize} />
<PrivateRoute path='/text_editor' component={TextEditor} />
<PrivateRoute path='/files' component={FileSearch} />
<Route component={SplashPage} />
</Switch>
)
}
Here is a test on one of my "undecorated" route. This test passes without any issues
it('should direct to the home page', () => {
const wrapper = mount(
<MemoryRouter initialEntries={['/']}>
<Routes />
</MemoryRouter>
)
expect(wrapper.find('WelcomeScreen')).to.have.length(1);
})
However, when I run the same test on a connected route....
it('should direct to the authorized page', () => {
const wrapper = mount(
<MemoryRouter initialEntries={['/auth']}>
<Routes />
</MemoryRouter>
)
expect(wrapper.find('Connect(Authorized')).to.have.length(1);
})
The tests blows up with the error:
Invariant Violation: Could not find "store" in either the context or
props of "Connect(Authorize)". Either wrap the root component in a
, or explicitly pass "store" as a prop to
"Connect(Authorize)".
So I refactored the test to include a mockStore using redux-mock-store...
it('should direct to the authorize page', () => {
const mockStore = configureStore()
const store = mockStore({ state: '' })
const component = mount(
<Provider store={store}>
<MemoryRouter initialEntries={['/auth']}>
<Routes />
</MemoryRouter>
</Provider>
)
expect(component.find('Connect(Authorize)')).to.have.length(1);
})
But now my error message is:
TypeError: Cannot convert object to primitive value
I'm now at a loss as to how to pass the store to the connected component to test its existence? Does any one have any ideas on the best way of testing a connected route?

Answer 1

Enzyme's mount does a full rendering. It is much slower than shallow and renders any children in addition to the component itself. A full render also requires, as you have found, that you provide mocks for everything the component might need.
Calling mount like this ends up being closer to an end-to-end test than a unit test.
Unit tests are really about testing what is specific to that component. In this case you only need to test that you have properly configured the Route elements. Any child components have their own tests, and Switch and Route should be tested in the library they are from.
Here is an example of how I unit tested a similar component:
// users.js
import * as React from 'react';
import { Route, Switch } from 'react-router-dom';
import EditUser from './editUser';
import UserList from './userList';
export default function Users() {
return (
<Switch>
<Route exact={true} path="/users" component={UserList}/>
<Route exact={true} path="/users/createuser" component={EditUser}/>
<Route path="/users/:id" component={EditUser}/>
</Switch>
);
}
// users.test.js
import { shallow } from 'enzyme';
import * as React from 'react';
import EditUser from './editUser';
import UserList from './userList';
import Users from './users';
describe("Users", () => {
describe('component', () => {
let element;
beforeEach(() => {
element = <Users />
});
it('renders as expected', () => {
const component = shallow(element);
expect(component).toMatchSnapshot();
});
it('routes /users to UserList', () => {
const component = shallow(element);
expect(component.find('Route[exact=true][path="/users"]').first().prop('component')).toBe(UserList);
});
it('routes /users/createuser to EditUser', () => {
const component = shallow(element);
expect(component.find('Route[exact=true][path="/users/createuser"]').first().prop('component')).toBe(EditUser);
});
it('routes /users/:id to EditUser', () => {
const component = shallow(element);
expect(component.find('Route[path="/users/:id"]').first().prop('component')).toBe(EditUser);
});
});
});
Unit testing like this targets just the component itself keeping your tests isolated, targeted, and fast. You can ensure that everything comes together and behaves properly as a whole in your end-to-end tests.