Test really slow because of MutationObserver not disconnecting directly

• @testing-library/dom version: 7.26.3
• Testing Framework and version: @testing-library/react version: 11.1.0 jest version: 26.6.1
• DOM Environment: jsdom version: 16.4.0

Hello guys 😃

What happened:

My tests are really slow.

Reproduction:

I made a little codesandbox: https://codesandbox.io/s/mutationobserver-reproduction-pe9gf?file=/src/__tests__/index.js where you can see my problem.

The issue is that the callback of waitFor is called even when the element has been found:

The console log is printed thrice instead of one:

Problem description:

The MutationObserver is disconnected at the end of the test instead of directly when the onDone callback is called. I guess this is because the thread is not available until the end of the test. These unnecessary callback’s calls (in the MutationObserver) make my tests really slow as you can see below:

Suggested solution:

I have tested to directly disconnect the observer instead of inside the setImmediate method (https://github.com/testing-library/dom-testing-library/blob/master/src/wait-for.js#L97). I get really faster tests:

if (!usingFakeTimers) {
    clearInterval(intervalId)
    observer.disconnect()
}

Is there a reason to disconnect the observer inside setImmediate instead of synchronously ? Am I doing something wrong ? Or maybe I could make a PR to make the disconnection configurable globally (choice would be between synchronously and asynchronously) ?

[kentcdodds]

I don’t think it’s worth the complexity. People should run their code in an environment that has proper support for MutationObserver.

[romain-trotard]

Again thank you all I close the issue 😃 Pr: #801