Use case for `waitForDOMChange`

• @testing-library/dom version: 7.5.2
• Testing Framework and version: tape
• DOM Environment: Chrome / electron

I have a concrete use case for the waitForDOMChange() method.

I have a piece of UI which I want to test that it is a no-op.

For example, clicking on a row in a table and having that be the currently selected row for selection purposes.

I want to test that clicking on the row twice will render the same visual change twice.

To be able to test this I need to click once; assert() ; click again ; waitForReRenderComplete(); assert()

I need some kind of waitForDOMChange() or waitForReRenderComplete() since I want to test that the component re renders into the EXACT SAME visual state.

If I run my assertion before the click handler runs then I will just be asserting that the click handler didnt run at all.

Relevant code or config:

  const selected4 = await dom.waitFor(() => {
    const selected = rows.map(r => r.getAttribute('data-selected'))
    assert(selected[1] === 'true')
    return selected
  })
  t.deepEqual(selected4, ['false', 'true', 'false'])

  // clicking an already selected row should be idempotent
  // This means the assertion about the rows should be false, true, false
  // before the click.
  // And the assertion about the rows should be false, true, false after the
  // click since from a user perspective clicking an already clicked row is a no-op
  userEvent.click(rows[1])

  // We need to wait for the DOM component to re render ...
  // If we run the assertion now then it will run too early;
  // If we wait for the correct state then it runs too early since we want to test
  // That after the re render the user seens ZERO visual change.
  await dom.waitForDomChange({ container: rows[1] })

  const selected5 = rows.map(r => r.getAttribute('data-selected'))
  t.deepEqual(selected5, ['false', 'true', 'false'])

What you did:

I called waitForDOMChange() and it told me it was deprecated.

What happened:

I saw a deprecation warning

Reproduction:

Call waitForDOMChange()

Problem description:

I would like to waitForDOMChange() as that’s the only thing I can do. Instead I was told its deprecated.

Suggested solution:

Add an option to supress the deprecation warning like { force: true } or { ignoreDeprecation: true }

That or undeprecate the method.

[kentcdodds]

Yeah, this might be a rare use case for a empty callback in waitFor:

await waitFor(() => {})

This is not recommended because it really is an implementation detail. How can you be sure that the DOM was actually changed in that time? But this sounds like a unique case 🤷‍♂️

In any case, we’re not going to bring back waitForDOMChange because that really is an implementation detail function. So I think we’re safe to close this.

[Raynos]

My component is a web component that re renders by assigning innerHTML

It does not use virtual dom or react.

The test is to verify that the UI looks the same after the innerHTML is changed with hopefully the same html string.

The same would apply for any other framework that sees a subtle change in a virtual dom but that does not visually impact the UI, maybe some non visual dom attributes change.

I guess waiting for dom change is an implementation detail. I guess I really want to wait for the click handler to finish. Maybe a sleep is the best option …