Angular Ag-Grid row group empty render when querying DOM elements with angular-testing-library

As mentioned in StackOverflow, I have an ag-grid that contains different columns and column groups, as well as row groups.

I am trying to test the DOM elements displayed in the row group using Jest and Angular Testing Library. The problem I am having is that the DOM renderer for the test does not detect any children of that row and only shows it as a self-enclosed DIV tag with no childer. But when I check it on the web browser I can see all the group rows and the nested rows within them.

I initially thought it was due to the row virtualization, but I have set the rowBuffer to 99999 and the cell fails to render anything but an empty DIV still.

What could be the issue? all the other cells and columns are rendering correctly, but the cell that contains a row group fails to render anything.

The image above shows what that row group is being rendered like through angular-testing-library. While in the browser that DIV contains multiple child SPANs and other elements.

[timdeschryver]

This seems to be a problem with Jest, more specifically js-dom. To render the items ag-grid is doing something with screen size, height of rows, available screen estate, … which isn’t supported with js-dom AFAIK.

What I tested:

• ran the same test with Karma, and the test succeeded
• ran the same test in Jest but without using Angular Testing Library, the test still fails

With these observations I think this isn’t Angular Testing Library specific.

[urbullet]

@timdeschryver It works with TestBed yes. It also passes on Cucumber.JS tests.

Further updates on another case where else I am facing this issue:

I have a 3rd party component that I am using inside my modal. I am querying the screen where the modal is open and all the form elements inside of it are showing, including my 3rd party component. Now there is an issue that the HTML elements of that 3rd party component are rendered but to a certain level. And the elements after that level are shown as an empty div as well (just like the grid issue).

So, it is not just an ag-grid issue, but more of an n-level child rendering issue.

I have tried rendering the nth child of that component separately and it does actually render what I was looking for. Is there an option I am missing to force the render of deeply nested components?

Update:

I have tried doing a deeply nested component that uses HTML tags only and then querying the screen, it seems to have no problem with that. I do not know as of now what could be causing the issue of not rendering the nested child’s content and representing it as an enclosed DIV