title: How can I mount the actual content of ag-grid in enzyme?
body: <p>When using Ag-Grid, it would be nice to be able to target DOM elements for click testing (e.g., when setting up a click handler, would like to target the 2nd row, simulate a click, and spy on the resulting actions).</p>
  
  <p>However, AG-Grid will not render the actual grid content in an Enzyme test, even when mounting. It will only render an empty div.</p>
  
  <p>I've created a simple CodePen here (<a href="https://codesandbox.io/s/ag-grid-enzyme-9wkgn" rel="nofollow noreferrer">https://codesandbox.io/s/ag-grid-enzyme-9wkgn</a>) that has a passing test and a failing test - however, I can't seem to get it to recognize the underlying grid content.</p>
  
  <pre><code>describe("ag-grid", () =&gt; {
    let app;
    beforeEach(() =&gt; {
      app = mount(&lt;Grid /&gt;);
    });
    it("renders a grid", () =&gt; {
      expect(app.find("AgGridReact").length).toBe(1);
    });
    it("renders 3 rows", () =&gt; {
      console.log(app.debug());
      expect(app.find(".ag-row").length).toBe(3);
    });
  });
  </code></pre>
  
  <p>I expect 2 successful tests - instead, the debug prints:</p>
  
  <pre><code>&lt;Grid&gt;
    &lt;div className="ag-theme-balham" style={{...}}&gt;
      &lt;AgGridReact columnDefs={{...}} rowData={{...}}&gt;
        &lt;div style={{...}} /&gt;
      &lt;/AgGridReact&gt;
    &lt;/div&gt;
  &lt;/Grid&gt; 
  </code></pre>
  
  <p>and the test results:</p>
  
  <pre><code>expect(received).toBe(expected)
  
  Expected value to be (using ===):
    3
  Received:
    0
  
    17 |   });
    18 |   it("renders 3 rows", () =&gt; {
    19 |     console.log(app.debug());
  &gt; 20 |     expect(app.find(".ag-row").length).toBe(3);
    21 |   });
    22 | });
  </code></pre>