title: How to test forwarded ref in React using test renderer or enzyme?
body: <p>I use some amount of animations in my application and all animations depend on the refs (I am using GSAP). Most of the tested elements are located in other React components; so, I have set up <code>forwardRef</code> in my components to to pass the ref to the needed elements.</p>
  
  <p>Now, I want to test these refs using Jest and Enzyme or React Test Renderer but I have not been able to achieve it with both the libraries. Here is my current implementation:</p>
  
  <pre><code>it('passes refs to the container component', () =&gt; {
      const ref = React.createRef();
      const div = document.createElement('div');
      ReactDOM.render(&lt;Row ref={ref} /&gt;, div);
  
      const element = div.querySelector('div');
      expect(element).toBe(ref.current);
  });
  </code></pre>
  
  <p>Using <code>ReactTestRenderer.create</code> or <code>enzyme.render</code> to do a full rendering does not work because the refs are empty. Then, I found <code>enzyme.mount</code> function, which does something similar to <code>ReactDOM.render</code>; so, decided to use that:</p>
  
  <pre><code>it('passes refs to the container component', () =&gt; {
      const ref = React.createRef();
      const wrapper = mount(&lt;Row ref={ref} /&gt;);
      const div = wrapper.find('div').first().getDOMNode();
      expect(div).toBe(ref.current);
  });
  </code></pre>
  
  <p>This test does not pass because for some reason, the <code>div</code> returns HTMLElement while <code>ref.current</code> return something called WrapperComponent instead of returning the forwarded element.</p>
  
  <p>Creating element and using ReactDOM to render and test the ref works fine but I would want to know if there is a way to use enzyme or react test renderer for this purpose (I am not a fan of using multiple libraries for rendering to test different functionalities).</p>
  
  <p>The main reason I want to to test refs is because if a ref changes to another element in the component, all the animations that use the component's ref will break. So, I want to specify what elements are accessed when using refs.</p>