Testing React Component with Enzyme and Mocha - reactjs

Question

I have the following component in my react redux project and I'm trying to implement tests but running into problems when trying to test the components
Users.js
export class Users extends Component {
componentWillMount() {
const dispatch = this.context.store.dispatch;
dispatch({ type: UserActions.fetchUsers(dispatch)});
}
render() {
const {users,isFetching} = this.props;
return (
<div>
<CardHeader
title={this.props.route.header}
style={{backgroundColor:'#F6F6F6'}}/>
<UserListHeader/>
{isFetching ? <LinearProgress mode="indeterminate" /> : <UserList users={users}/>}
</div>
)
}
}
Users.propTypes = {
users: PropTypes.array,
actions: PropTypes.object.isRequired
};
Users.contextTypes = {
store: React.PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
users: state.users.users,
isFetching:state.users.isFetching
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(UserActions, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Users);
and I'm trying to test it like the example on the Redux website, but I'm running into issues
UsersSpec.js
import {Users} from '/containers/users/Users'
const middlewares = [ thunk ];
const mockStore = configureMockStore(middlewares);
function usersSetup() {
const props = {
users: expect.createSpy(),
isFetching:expect.createSpy()
};
const enzymeWrapper = mount(<Users />,{context:{store:mockStore}});
return {
props,
enzymeWrapper
}
}
describe('Users', () => {
it('should render self and subcomponents', () => {
const { enzymeWrapper } = usersSetup();
exp(enzymeWrapper.find(UserListHeader)).to.have.length(1);
})
})
But I get the error 'TypeError: dispatch is not a function' should I be mocking the componentWillMount function or how should I test this component.
Should I just be testing the dumb child components? Any guidance would be great. Thanks

Answer 1

mount function provides full dom rendering therefore you'll need to set up jsdom in your test setup. You can see more info here:
Error: It looks like you called `mount()` without a global document being loaded
Another thing is that, you should provide childContextTypes attribute when you're defining context with mount like this:
mount(<Users />, {
context: { store: mockStore },
childContextTypes: { store: PropTypes.object }
});
However if you're writing unit test of a React component you should use shallow function provided by enzyme. It just renders the component with one deep level, so that you don't need to create jsdom and provide context parameters when you're creating the wrapper component. mount rendering in a test means you're actually writing an integration test.
const wrapper = shallow(<Users />);
wrapper.find(UserListMenu).to.have.length(1);