When running in Jest, code assumes `setImmediate` and `clearImmediate`

• @testing-library/dom version: 7.29.6
• Testing Framework and version: Jest@https://github.com/facebook/jest/pull/11222
• DOM Environment: JSDOM@16.4.0

Relevant code or config:

require('@testing-libray/react')

What you did:

Ran the test without global setImmediate and clearImmediate defined

What happened:

Reproduction:

See https://github.com/facebook/jest/pull/11222. Essentially, delete setImmediate and clearImmediate from global in the JSDOM env Jest sets up.

Problem description:

It throws runtime errors at require/import-time

Suggested solution:

Do a typeof setImmediate !== 'undefined' before using it.

[facundop3]

Proposed fix:

  const timerAPI = {
    clearInterval,
    clearTimeout,
    setInterval,
    setTimeout,
  }
  if (typeof setImmediate === 'function') {
    timerAPI.setImmediate = setImmediate;
  }
  if (typeof clearImmediate === 'function') {
    timerAPI.clearImmediate = clearImmediate;
  }
  // ...

This function depends on setImmediate to work properly in order to work, I think this could probably use the polyfill declared below in the same file.

function waitForDomChange({
  container = getDocument(),
  timeout = getConfig().asyncUtilTimeout,
  mutationObserverOptions = {
    subtree: true,
    childList: true,
    attributes: true,
    characterData: true,
  },
} = {}) {
  if (!hasWarned) {
    hasWarned = true
    console.warn(
      `\`waitForDomChange\` has been deprecated. Use \`waitFor\` instead: https://testing-library.com/docs/dom-testing-library/api-async#waitfor.`,
    )
  }
  return new Promise((resolve, reject) => {
    const timer = setTimeout(onTimeout, timeout)
    const {MutationObserver} = getWindowFromNode(container)
    const observer = new MutationObserver(onMutation)
    runWithRealTimers(() =>
      observer.observe(container, mutationObserverOptions),
    )

    function onDone(error, result) {
      clearTimeout(timer)
      setImmediate(() => observer.disconnect())
      if (error) {
        reject(error)
      } else {
        resolve(result)
      }
    }

    function onMutation(mutationsList) {
      onDone(null, mutationsList)
    }

    function onTimeout() {
      onDone(new Error('Timed out in waitForDomChange.'), null)
    }
  })
}

@renatoalencar is it possible to switch the setImmediate in favour of setTimeout(()=> observer.disconnect(), 0) in waitForDomChange implementation ?

[renatoalencar]

Proposed fix:

  const timerAPI = {
    clearInterval,
    clearTimeout,
    setInterval,
    setTimeout,
  }
  if (typeof setImmediate === 'function') {
    timerAPI.setImmediate = setImmediate;
  }
  if (typeof clearImmediate === 'function') {
    timerAPI.clearImmediate = clearImmediate;
  }
  // ...

This function depends on setImmediate to work properly in order to work, I think this could probably use the polyfill declared below in the same file.

function waitForDomChange({
  container = getDocument(),
  timeout = getConfig().asyncUtilTimeout,
  mutationObserverOptions = {
    subtree: true,
    childList: true,
    attributes: true,
    characterData: true,
  },
} = {}) {
  if (!hasWarned) {
    hasWarned = true
    console.warn(
      `\`waitForDomChange\` has been deprecated. Use \`waitFor\` instead: https://testing-library.com/docs/dom-testing-library/api-async#waitfor.`,
    )
  }
  return new Promise((resolve, reject) => {
    const timer = setTimeout(onTimeout, timeout)
    const {MutationObserver} = getWindowFromNode(container)
    const observer = new MutationObserver(onMutation)
    runWithRealTimers(() =>
      observer.observe(container, mutationObserverOptions),
    )

    function onDone(error, result) {
      clearTimeout(timer)
      setImmediate(() => observer.disconnect())
      if (error) {
        reject(error)
      } else {
        resolve(result)
      }
    }

    function onMutation(mutationsList) {
      onDone(null, mutationsList)
    }

    function onTimeout() {
      onDone(new Error('Timed out in waitForDomChange.'), null)
    }
  })
}

@renatoalencar is it possible to switch the setImmediate in favour of setTimeout(()=> observer.disconnect(), 0) in waitForDomChange implementation ?

I’m currently trying to see if there’s any way to break this, and actually works just fine. Let me do some more tests and see.