How can i test with Enzyme+Mocha method call inside Component - reactjs

Question

Cannot figure out how to test a component method with enzyme + mocha + sinon. I want to test if component calls method loadPosts on button click.
import React from 'react';
import { configure, mount} from 'enzyme';
import { expect } from 'chai';
import Adapter from 'enzyme-adapter-react-16';
import { Posts } from '../Components/Posts';
import sinon from 'sinon';
configure({ adapter: new Adapter() });
describe('Posts', () => {
let wrapper;
let inst;
beforeEach(() => {
wrapper = mount(<Posts />);
inst = wrapper.instance();
sinon.spy(inst, 'loadPosts');
wrapper.find('button').simulate('click');
});
it('should load posts on button click', () => {
wrapper.update();
expect(inst.loadPosts).to.have.property('callCount', 1);
});
it('should set `loading` to true', () => {
expect(wrapper.state('loading')).to.equal(true);
});
});
And here is my component:
import React, {Component} from 'react';
import axios from 'axios';
export class Posts extends Component {
state = {
posts: null,
loading: false
}
componentDidMount() {}
loadPosts = () => {
this.setState({loading: true}, () => {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then( d => this.setState({
posts: d.data
}));
});
}
render() {
return (<div>
<h4>I am posts</h4>
<button onClick= {this.loadPosts}>Load posts</button>
</div>);
}
}
But my test fails with error: Exception error: expected [Function] to have property 'callCount' of 1 but got 0

Answer 1

The onClick of your button gets bound directly to whatever this.loadPosts is when the component renders.
When you replace loadPosts with the spy, it doesn't have any effect on the currently rendered button so onClick doesn't call your spy.
The two options for fixing it are to call this.loadPosts using an arrow function like this:
<button onClick={() => this.loadPosts()}>Load posts</button>
...so that when onClick gets called it calls whatever this.loadPosts is currently set to.
The other option is to force a re-render after you create your spy so onClick gets bound to your spy instead of the original function.