title: Why do I get method is not a function in my jesttest?
body: <p>My jest unittest looks like this:</p>
  
  <pre><code>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', () =&gt; {
          const component = renderer.create(
              &lt;Calculator&gt;&lt;/Calculator&gt;
          );
          let tree = component.toJSON();
          expect(tree).toMatchSnapshot();
          console.log('component=',component.refs);
  
          // Simulate click on button -&gt; trigger sumCalc()
          ReactTestUtils.Simulate.click(component.refs.button);
  
  });
  </code></pre>
  
  <p>When I run the test I get:</p>
  
  <pre><code>TypeError: Cannot read property 'button' of undefined
  </code></pre>
  
  <p>My react component looks like this:</p>
  
  <pre><code>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 (&lt;div&gt;
                  &lt;input type="text" placeholder="number 1" ref="one"/&gt;
                  &lt;input type="text" placeholder="number 2" ref="two"/&gt;
                  &lt;button ref="button" onClick={this.calcSum}&gt;sum&lt;/button&gt;
                  sum: {this.state.sum}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>How can I avoid this error? what am I missing?
  The component works when rendered into the DOM but the unit test has issues.</p>