Timed out retrying: cy.click() failed because this element is detached from the DOM

[DanielPe05]

• cypress-testing-library version: ^6.0.1
• node version: v12.13.1
• npm (or yarn) version: npm v6.12.1

Relevant code or config

cy.findByText('Submit CTA')
      .should('exist')
      .click()

What happened:

 CypressError: Timed out retrying: cy.click() failed because this element is detached from the DOM.

Problem description:
This problem is outlined in this thread cypress-io/cypress#7306 where DOM nodes are detached prior to attempting the clicks. I thought that #78 would take care of that problem but it looks like the problem exists when running the code above. As you can imagine this makes tests flaky and it doesn't look like cypress has native support for this yet.

In this post they provide a workaround to this problem by using the pipe plugin however when used in combination with cypress-testing-library it looks like the problem still exists.

I'm posting here simply because we are using the library and I was wondering if #78 was intended to fix this issue and I'm not sure if maybe I'm misusing findByText. Any help or direction is appreciated.
Thanks

[kentcdodds]

Hi @DanielPe05,

It's a little hard to help without a reproduction I'm afraid 😬

[DanielPe05]

Thanks for the reply Kent, I'll work on posting a link with the reproducible issue. It is kind of difficult considering that this is flaky behavior that happens mostly on CI.

[DanielPe05]

So I ended up figuring out the issue and a temporary workaround until retries on click are natively supported in cypress. I apologize for opening the issue on this repo as it didn't have anything to do with cypress-testing-library itself and it was more of a known cypress issue that becomes more prominent when the app being test does a lot of repaints (which sadly the codebase I work on does).
Anyways I thought I'd post the workaround here in case someone else stumbles upon the problem.

import 'cypress-pipe'

/**
 * This will help with flaky behavior in cypress where there is a race condition
 * between the test runner and the app itself and its lifecycle. The problem
 * comes from the app detaching DOM elements before cypress runs actions on
 * them.
 *
 * See more details on this thread: https://github.com/cypress-io/cypress/issues/7306
 * This will probably be natively supported by cypress at some point.
 *
 * The pipe solution comes from this article cypress offers as a workaround the
 * problem for the time being.
 * https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/
 */
Cypress.Commands.add('safeClick', { prevSubject: 'element' }, $element => {
  const click = $el => $el.click()
  return cy
    .wrap($element)
    .should('be.visible')
    .pipe(click)
    .should($el => expect($el).to.not.be.visible)
})

and in your tests, you should simply be able to

cy.findByText('Some Text').safeClick()

[nickpalmer]

The above version depends on the element changing visibility on click.

A more generic version that works well for us is:

import 'cypress-pipe';
Cypress.Commands.add('safeClick', { prevSubject: 'element' }, $element => {
  const click = $el => $el.click()
  return cy
    .wrap($element)
    .should('be.visible')
    .pipe(click)
    .should($el => expect(Cypress.dom.isDetached($el)).to.be.false);
});

This ensures that the element isn't detached which is the real source of the problem. Not sure why Cypress doesn't do this on click by default.