[Solved]-Test unmounting with react-testing-library-Reactjs

I guess it's about how react-dom and jsdom(which used by testing too) works.

(Please correct me or let me know if guessing is unacceptable! I will remove this. )

1. Button type return by queryByText is HtmlElment

2. react or react-dom is just minimize the task for dom manipulation, eventually jsdom would still do the text changing and button removing works.

3. Since the testing tool is using jsdom, I check the removeChild part of code, and believe they are following W3C specification. I assume in the level of dom manipulation, jsdom would works like browsers. Thus I simulated your code like this:

const btn = document.getElementById('btn');
const btnContainer = document.getElementById('btnContainer');

btn.textContent = '1';
console.log('btn after click 1: ' + btn);
btn.textContent = '2';
console.log('btn after click 2: ' + btn);
btnContainer.removeChild(btn);
console.log('btn after removed: '+  btn);

<div id='btnContainer'><button id='btn'>0<button></div>

4. As you can see, after removing from div, the btn variable is still [object HTMLButtonElement] Maybe It's similar to use splice to an array which contained a defined object, the initial obj still remains the same?

const obj = { 'a': 1};
const arr = [obj];
arr[0]['a'] = 2;
arr.splice(0, -1);
console.log(obj)

Therefore, I think it's more about how garbage collection works in javascript.

In addition, maybe not to reuse the query result, and always query again in this situation, the result will be more expectable.

P.S. I found there is a method call toBeInTheDocument!