For context: from my understanding, in React you test things mostly as black-box, that is, you don't test each individual function, but rather "when I do x, y happens" and assert the DOM. So, I want to test "when I click this button, a row is added to the table", and "when I click a row's delete button, that row is removed".

Trouble is, when using React Testing Library, the table only outputs

<div class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter" />

without any children!

I imagine I need to wait for some state update at some point, but I've no idea where. Any help would be greatly appreciated.

For convenience, here is a sandbox.

Not sure why but to stop it from bricking I had to add

global.MutationObserver = class {
  constructor(callback) {}
  disconnect() {}
  observe(element, initObject) {}
};

Also worth noting that my actual implementation uses TypeScript but thought I'd use JS to simplify things.