title: ReactJS: How to test for a ref?
body: <p>This is a function used in a react component. As you can see I'm using ref to get the focus on a specific input element of another component.</p>
  
  <pre><code>myFunction (param) {
    this.refInput &amp;&amp; this.refInput.focus()
  }
  </code></pre>
  
  <p>Now I would like to test via jestJS for the <code>focus()</code> to have been called.</p>
  
  <pre><code>it('myFunction() should call focus()', () =&gt; {
    // SETUP
    const refInput = { focus: jest.fn() }
    wrapper = shallow(&lt;Example
      refInput={refInput}
    /&gt;)
    // EXECUTE
    wrapper.instance().myFunction('anything')
    // VERIFY
    expect(refInput.focus).toHaveBeenCalled()
  })
  </code></pre>
  
  <p>But this is wrong, as I pass the <code>refInput</code> as a property. But it is <strong>not</strong> <code>this.props.refInput</code>, so this attempt is not working.</p>
  
  <p>How do I setup a ref in my test?</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>This is how my component looks like:</p>
  
  <pre><code>class Example extends Component {
    setStep (state) {
      state.term = ''
      this.setState(state)
      this.refInput &amp;&amp; this.refInput.focus()
    }
  
    render () {
      return (
        &lt;div&gt;
          &lt;Step onClick={this.setStep.bind(this, this.state)}&gt;
            &lt;Step.Content title='title' description='description' /&gt;
          &lt;/Step&gt;
          &lt;Input ref={input =&gt; { this.refInput = input }} /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>