testing custom react methods with jest and enzyme - reactjs

Question

I am trying to test a method within a react component. The component is a form and it should be testing the handleSubmit() method gets called when the submit button is clicked. I have tried the below.
it('handlesSubmit when submit button is clicked', () => {
wrapper.find(Button).simulate('click');
expect(wrapper.instance().handleSubmit).toHaveBeenCalled();
})
This gave an error jest.fn() value must be a mock function or spy. So I tried this:
it('handlesSubmit when submit button is clicked', () => {
const handleSubmit = jest.fn();
wrapper.find(Button).simulate('click');
expect(handleSubmit).toHaveBeenCalled();
})
This errors saying Expected mock function to have been called

Answer 1

The first block fails because wrapper.instance().handleSubmit is not a jest mock function; it is whatever the class method defines it as.
The second block fails because handleSubmit, while it is a jest mock function, is not tied to your wrapper component at all. It is a local variable. When you simulate the click, it is again calling the actual implementation.
In order to accomplish what you are trying to do, you have to do something like this
it('handlesSubmit when submit button is clicked', () => {
const handleSubmit = jest.fn();
WrapperComponent.prototype.handleSubmit = handleSubmit;
const wrapper = shallow(<WrapperComponent />);
wrapper.find(Button).simulate('click');
expect(handleSubmit).toHaveBeenCalled();
})
where WrapperComponent is the component you are testing.
The above ought to work, but you can sometimes accomplish something similar in a nicer way. Depending on your component's implementation, it is oftentimes easier to test that the functionality in your handleSubmit method is called rather than the handleSubmit method itself. For instance, if my component was something like
class TestComponent extends React.Component {
constructor(props) {
super(props)
this.state = { clicked: false }
this.onClick = this.onClick.bind(this)
}
onClick() {
this.props.onClick()
this.setState({ clicked: true })
}
render() {
return (
<button onClick={ this.onClick }>
{ 'Click Me' }
</button>
)
}
}
I could test it by doing
it('calls onClick props and sets clicked state to true when clicked', () => {
const onClick = jest.fn();
const testComp = shallow(<TestComponent onClick={ onClick } />);
wrapper.find('button').simulate('click');
expect(onClick).toHaveBeenCalled();
expect(testComp.state('clicked')).toBe(true)
})
I generally prefer this type of test because I don't have to overwrite prototype, and it is actually testing that the click triggers the logic I expect. The original test really only covers that I am passing this.handleSubmit as an onClick prop to a Button component and nothing more.