Clearing innerText does not correct update DOM

[Nokel81]

• @testing-library/react version: 12.1.5
• Testing Framework and version: [email protected]
• DOM Environment: [email protected]

Relevant code or config:

const result = render(<div id="my-div" />);
const myDiv = result.baseElement.querySelector("#my-div") as HTMLDivElement;
const newEntry = document.createElement("span");

newEntry.append("I am some text");

myDiv.appendChild(newEntry);
myDiv.innerText = "";
logDOM(myDiv);

This outputs:

<div
  id="my-div"
>
  <span>
    I am some text
  </span>
</div>

instead of what it should

<div
  id="my-div"
/>

What you did:

I am trying to test xterm and found that if I set innerHTML instead then this library produces the expected results.

What happened:

The child elements were not being cleared correctly.

Reproduction:

See above

Problem description:

It is incorrect behaviour according to the spec

Suggested solution:

Maybe this is required to be fixed in jsdom instead? (I found jsdom/jsdom#1245).

---

I am creating this issue because xtermjs/xterm.js#4214 was closed due to security concerns.

[eps1lon]

Maybe this is required to be fixed in jsdom instead? (I found jsdom/jsdom#1245).

Indeed. Closing in favor of jsdom/jsdom#1245