title: How can I test the content in ag-grid using testing-library?
body: <p>I am trying to write a few simple tests that the headers and data I want to render are showing up as expected. I created a repo - <a href="https://github.com/olore/ag-grid-testing-library" rel="noreferrer">https://github.com/olore/ag-grid-testing-library</a> to reproduce. The table looks as I would expect when opened in a browser.</p>
  <pre><code>&lt;AgGridReact
    columnDefs={ /* First 2 always findable, others never */
    [
      { field: &quot;make&quot; }, 
      { field: &quot;model&quot; }, 
      { field: &quot;price&quot; }, 
      { field: &quot;color&quot; },
    ]}
    rowData={
    [{ 
      make: &quot;Toyota&quot;, 
      model: &quot;Celica&quot;,
      price: &quot;35000&quot;, 
      color: &quot;blue&quot; 
      }]
    }
    pagination={true}&gt;&lt;/AgGridReact&gt;
  </code></pre>
  <p>And the tests</p>
  <pre><code>test('renders all the headers', async () =&gt; {
    const { getByText } = render(&lt;GridExample /&gt;);
    expect(getByText(&quot;Make&quot;)).toBeInTheDocument();  // PASS
    expect(getByText(&quot;Model&quot;)).toBeInTheDocument(); // PASS
    expect(getByText(&quot;Price&quot;)).toBeInTheDocument(); // FAIL
    expect(getByText(&quot;Color&quot;)).toBeInTheDocument(); // FAIL
  });
  </code></pre>
  <p>Locally, the first 2 column headers and data are accessible, but none of the other columns are rendered, as I can see in the output of testing-library. I am using <code>--env=jsdom-fourteen</code> as recommended by other posts.</p>
  <p>Strangely enough, no headers or data are rendered for the tests when in the codesandbox for this repo, as with local, the browser looks correct.
  <a href="https://codesandbox.io/s/gallant-framework-e54c7" rel="noreferrer">https://codesandbox.io/s/gallant-framework-e54c7</a>. I then tried waiting for <code>gridReady</code>
  <a href="https://codesandbox.io/s/intelligent-minsky-wl17y" rel="noreferrer">https://codesandbox.io/s/intelligent-minsky-wl17y</a>, but it didn't make a difference.</p>
  <p>EDIT: Also tried directly calling a function in onGridReady, same problem (first 2 columns pass, second 2 fail)</p>
  <pre><code>test('renders all the headers', async (done) =&gt; {
    let page;
  
    const onReady = () =&gt; {
      expect(page.getByText(&quot;Make&quot;)).toBeInTheDocument();  // PASS
      expect(page.getByText(&quot;Model&quot;)).toBeInTheDocument(); // PASS
      expect(page.getByText(&quot;Price&quot;)).toBeInTheDocument(); // FAIL
      expect(page.getByText(&quot;Color&quot;)).toBeInTheDocument(); // FAIL
      done();
    }
    page = render(&lt;GridExample ready={onReady}/&gt;);
  });
  </code></pre>