Why do I get method is not a function in my jesttest? - unit-testing

Question

My jest unittest looks like this:
import React from 'react';
import renderer from 'react-test-renderer';
import ReactTestUtils from 'react-dom/test-utils'
import Calculator from "./calculator";
test('test that calculator', () => {
const component = renderer.create(
<Calculator></Calculator>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
console.log('component=',component.refs);
// Simulate click on button -> trigger sumCalc()
ReactTestUtils.Simulate.click(component.refs.button);
});
When I run the test I get:
TypeError: Cannot read property 'button' of undefined
My react component looks like this:
import React, {Component} from 'react';
export default class Calculator extends Component {
constructor(props) {
super(props);
this.calcSum = this.calcSum.bind(this);
this.state = {sum: 0};
}
calcSum() {
console.log('this.refs.one=', this.refs.one);
let s = Number(this.refs.one.value) + Number(this.refs.two.value);
this.setState({sum: s});
}
render() {
return (<div>
<input type="text" placeholder="number 1" ref="one"/>
<input type="text" placeholder="number 2" ref="two"/>
<button ref="button" onClick={this.calcSum}>sum</button>
sum: {this.state.sum}
</div>
);
}
}
How can I avoid this error? what am I missing?
The component works when rendered into the DOM but the unit test has issues.

Answer 1

component.toJSON() returns a JSON not a JavaScript object. Moreover calcSum is not a prop, instead it is a method defined on your component class.
Hence you could use getInstance() method to manually invoke calcSum.
Try this:
const component = renderer.create(<Calculator />);
component.getInstance().calcSum();
Now you can see that console.log output from calcSum.