Using Jest to assert a function is called from another function
I have a component in React with an onChange event. In the code below, I need to assert that the correct method is called when
this.props.onChangeImage()
called in the Gallery component.
export class Form extends React.PureComponent {
componentDidMount = () => {
this.props.getUser();
this.props.getImages();
this.props.getBoards();
}
render() {
if (this.props.pin === null) {
let boards = [];
boards = this.props.boards;
boards = boards.data.map(
(item) => <MenuItem key={item.id.toString()} value={item.name} primaryText={item.name} />
);
return (
<div>
<Helmet
title="Form"
meta={[
{ name: 'description', content: 'Description of Form' },
]}
/>
<Gallery images={this.props.images} onChange={this.props.onChangeImage} />
</div>
);
}
return (<div className="spinner-container"><CircularProgress /></div>);
}
}
Below, in the onChangeImage method, I am trying to assert that the sendEventToParentWindow method is being called.
function mapDispatchToProps(dispatch) {
return {
onChangeImage: (event) => {
dispatch(createPinImage(event.target.value));
sendEventToParentWindow({
action: 'change-image',
description: 'Change image',
});
},
};
}
function sendEventToParentWindow(message) {
window.postMessage(message, window.location.href);
}
export default connect(mapStateToProps, mapDispatchToProps)(Form);
I looked at several answers here and while this one seemed to be the closest it was, it didn't quite work for me: Jest is a mock function call
EDIT: Here is my test, which I believe is wrong because it assigns a mocked function to be called directly onChange when it should actually call the function, which in turn calls the layout. I need to somehow call the onImageChange function and then check that my spy has been called.
import Gallery from '../index';
import * as formIndex from '../../../containers/Form';
describe('<Gallery />', () => {
it('Expect sendMessageToParentWindow to be called on image change', () => {
const sendEventToParentWindowMock = jest.spyOn(formIndex, 'sendEventToParentWindow');
const gallery = shallow(<Gallery images={imagesMockData} onChange={sendEventToParentWindowMock} />);
gallery.find('input#image-1').simulate('change');
expect(sendEventToParentWindowMock).toBeCalled();
});
}
source to share
As I mentioned in the comment, you can pass the mocked function as a prop, the implementation of which will contain a call to your function sendEventToParentWindow
. those. you will need to create two mocked function.
-
sendEventToParentWindow
mock function. -
onChangeImage
A mock function with an implementation where the implementation will only contain a call to yoursendEventToParentWindow
mock function .
So, the test will look something like this:
describe('<Gallery />', () => {
it('Expect sendMessageToParentWindow to be called on image change', () => {
const sendEventToParentWindowMock = jest.fn();
const onChangeImageMock = jest.fn(() => {
sendEventToParentWindowMock();
});
const gallery = shallow(<Gallery images={imagesMockData} onChange={onChangeImageMock} />); // Passing the mocked onChangeImage as prop
gallery.find('input#image-1').simulate('change');
expect(sendEventToParentWindowMock).toBeCalled();
});
}
Hope this helps :)
source to share