Testing React/Redux app with componentWillMount() this.props.dispatch() call - reactjs

Question

Here is a stripped down version of my Redux/React component:
import React from "react";
import { connect } from "react-redux";
import Header from "./components/Header";
import { getMoviesInit } from "./actions/movieActions";
export class Layout extends React.Component {
componentWillMount() {
if (this.props.movies.length == 0) {
this.props.dispatch((dispatch) => {
dispatch(getMoviesInit());
});
}
}
render() {
return (
<div id="content-wrap">
<Header/>
{this.props.children}
</div>
);
}
};
export default connect((store) => {
return {
movies: store.movies
};
})(Layout);
When I try to run a test like the following, I'm told I this.props.dispatch() isn't a function which makes sense because there is a dispatch() call in the componentWillMount() function and I'm not using the connect() wrapped Layout:
import React from "react";
import LayoutWithConnect, { Layout } from "./Layout";
import { mount, shallow } from 'enzyme';
import { expect } from 'chai';
describe("Layout tests", function() {
beforeEach(() => {
let movies = {
featuredId: null,
currentTitles: {
movies: []
}
};
let subject = shallow(<Layout movies={movies} />);
});
});
However, if I try to use LayoutWithConnect in my test I get issues with there not being a store.
I'm not sure how I should be going about testing this component?

Answer 1

You can simply pass the dispatch function as a prop:
let dispatchedAction;
let dispatch = (action) => dispatchedAction = action;
let subject = shallow(<Layout movies={movies} dispatch={dispatch} />);
You can then also test that the view dispatched the correct action by comparing dispatchedAction with the expected action object.
If you find yourself doing this often, you can also use the excellent Sinon stubbing/mocking library, which allows you to easily create spy functions:
let dispatch = sinon.spy();
let subject = shallow(<Layout movies={movies} dispatch={dispatch} />);
expect(dispatch.calledWith(expectedAction)).to.be.true;