Testing ag-grid with @testing-library/react

Question

I'm trying to test component which use ag-grid.

When I do assertions to check if cells with given text are rendered I receive the following error:

expect(received).toBeInTheDocument() received value must be an HTMLElement or an SVGElement. Received has type: object Received has value: HERE IS EXPECTED HTML FOR THE CELL I'VE BEEN LOOKING FOR

I have created code sandbox for this issue (see grid.test.tsx) https://codesandbox.io/s/weathered-silence-4l1s1

Answer 1

It looks like ag-grid does something to the DOM. After rendering ag-grid inside the test it breaks all assertion which check the dom (even for elements outside grid!) when used in codesandbox. I understand that codesandbox is using real browser dom instead of jsdom.

I managed to make it work on my local machine, but I had to switch to jsdom 14 (check https://github.com/ianschmitz/jest-environment-jsdom-fourteen).

I've also needed to add this code in my tests setup (ag-grid is using innerText instead of textContent, without it I had no text inside rendered cells)

Object.defineProperty(global.window.Element.prototype, 'innerText', {
  set(value) {
    this.textContent = value;
  },
  configurable: true
})