Pretty-format throwing RangeError: Timed out retrying after 4000ms: Invalid string length

[Billbastos]

Hello.

Maybe related issue: https://github.com/testing-library/dom-testing-library/issues/44

When running e2e tests for my navigation component on chrome I am getting the following error

RangeError
Timed out retrying after 4000ms: Invalid string length

at printObjectProperties (webpack:///./node_modules/pretty-format/build/collections.js:174)
    at printComplexValue (webpack:///./node_modules/pretty-format/build/index.js:310)
    at printer (webpack:///./node_modules/pretty-format/build/index.js:393)
    at printObjectProperties (webpack:///./node_modules/pretty-format/build/collections.js:173)
    at printComplexValue ([webpack:///./node_modules/pretty-format/build/index.js:310](http://localhost:3000/__/#))
    at printer ([webpack:///./node_modules/pretty-format/build/index.js:393](http://localhost:3000/__/#))
    at printObjectProperties ([webpack:///./node_modules/pretty-format/build/collections.js:173](http://localhost:3000/__/#))
    at printComplexValue ([webpack:///./node_modules/pretty-format/build/index.js:310](http://localhost:3000/__/#))
    at printer ([webpack:///./node_modules/pretty-format/build/index.js:393](http://localhost:3000/__/#))
    at printObjectProperties ([webpack:///./node_modules/pretty-format/build/collections.js:173](http://localhost:3000/__/#))
From previous event:
    at whenStable (http://localhost:3000/__cypress/runner/cypress_runner.js:152675:65)
    at <unknown> (http://localhost:3000/__cypress/runner/cypress_runner.js:152105:14)
From previous event:
    at $Cy.retry (http://localhost:3000/__cypress/runner/cypress_runner.js:152085:76)
    at onFailFn (http://localhost:3000/__cypress/runner/cypress_runner.js:133910:21)
From previous event:
    at $Cy.verifyUpcomingAssertions (http://localhost:3000/__cypress/runner/cypress_runner.js:133935:105)
From previous event:
    at wrapped (http://localhost:3000/__cypress/runner/cypress_runner.js:157382:19)
    at <unknown> (http://localhost:3000/__cypress/runner/cypress_runner.js:156105:15)
From previous event:
    at CommandQueue.runCommand (http://localhost:3000/__cypress/runner/cypress_runner.js:156083:8)
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:156230:19)
    at <unknown> (http://localhost:3000/__cypress/runner/cypress_runner.js:156259:16)

• cypress-testing-library version: 8.0.3
• node version: v14.18.3
• yarn version: 3.2.3
• axe-core version: ^4.5.0
• cypress version: ^10.10.0
• cypress-axe version: ^1.0.0
• typescript version: ^4.7.3

Relevant code or config

it(`on mobile should have accessible dropdowns`, () => {
    const mobileScreen = SCREEN_SIZES[0]
    cy.viewport(mobileScreen[0], mobileScreen[1])

    cy.findByLabelText(`Main menu`).then(($hamburger) => {
      cy.wrap($hamburger)
        .trigger(`click`)
        .then(() => {
          cy.findByRole(`menubar`).within(() => {
            cy.findAllByRole(`menuitem`).then(($items) => {
              // Only items that hasn't have `href` have dropdowns,
              // so we filter out all links that have `href`
              $items.filter(`:not([href])`).each((_, $item) => {
                cy.wrap($item)
                  .trigger(`click`)
                  .then(() => {
                    cy.findByRole(`dialog`).then(($dialog) => {
                      cy.checkA11y($dialog, { rules: A11Y_RULES })
                      cy.findByLabelText(`Close submenu`).trigger(`click`)
                    })
                  })
              })
            })
          })
        })
    })
  })

What you did:

• The issue is happening when cy.findByRole('dialog') is called. I realized that if I add a cy.wait(500) before cy.findByRole('dialog') it works, but that is not a great solution for sure.
• Another solution that would fix the problem would be checking the loading state that happens before dialog is ready like so cy.get('[data-testid="loader"]').should('not.exist')
• I believe we are going to proceed with the loading state checking solution for our problem, however I was just wondering if it could throw a more specific error message when the element is not ready yet.

Suggested solution:

• Sorry I don't have any

[Fanch-]

Hello.

We experienced the same problem upgrading to cypress v10+ and updating every dependencies.

Downgrading to CTL 7.0.7 solved it.

It looks like the regression was introduced in v8.0.0

@testing-library/dom has been upgraded to v8 -> might be ?

[tgdevereux]

Hi, we also experienced this issue (it actually caused the tests to hang badly in our CI pipeline). The issue repro'd with versions v8.0.7 and v9 of testing-library/cypress (with Cypress 12.3.0 and 12.6.0)

Reverting to v7.0.7, as Fanch~ suggested above, resolved the issue, so it does look like it might be a bug introduced in v8.0.0

[jessezhang91]

we just ran into the same issue using cypress 11.2.0 and testing-library/cypress 8.0.7. reverting it back to 7.0.7 per above suggestions seems to have worked as well. the cy.findByRole and cy.findAllByText commands were both hanging up the browser

strangely we've been on 8.0.7 since november and we only just started seeing this issue a day ago with no other changes that we can find.

[jessezhang91]

i added this:

before(() => {
  cy.configureCypressTestingLibrary({
    getElementError(message, container) {
      const error = new Error(
        [message, container.tagName].filter(Boolean).join('\n\n'),
      );
      error.name = 'TestingLibraryElementError';
      return error;
    },
  });
});

to prevent prettyDOM from being called and this seems to be working now with the newer versions of testing-library/cypress

[patrykkarny]

Similar here. We use cypress 12.5.1 and @testing-library/cypress 9.0.0. Everything worked fine until yesterday when the test hung on cy.findAllByTestId and failed after the timeout. The issue happened only CI. Overwriting the element error message, as @jessezhang91 suggested, seems to fix it. We added that as a global cypress configuration to cypress/support/e2e.ts:

import { configure } from '@testing-library/cypress';

configure({
  getElementError(message, container) {
    const error = new Error(
      [message, container.tagName].filter(Boolean).join('\n\n'),
    );
    error.name = 'TestingLibraryElementError';
    return error;
  },
});

It looks like when the testing library error occurs, it breaks the retry-ability of the cypress and fails after the timeout. I wonder why it was working before and suddenly stopped working without any lib updates 🤔

[robmosca]

Had the same problem. It suddenly appeared yesterday. We use Cypress 9.7.0, @testing-library/cypress 7.0.6 and @testing-library/dom 8.19.0. Your solution @patrykkarny fixed it (as well as @jessezhang91 solution).

[jordwest]

Same problem, same fix, also suddenly started for us on 27/28 April. One thing I noticed is it seemed to freeze up whenever performing XHR requests.

We also hadn't upgraded any packages in our bundle, other than loading the latest Google Maps API dynamically via a script tag. Pinning the version to a couple releases ago fixed the error for a few tests involving maps requests.

[mateustalles]

Same thing here ("@testing-library/cypress": "^9.0.0", cypress: 12.5.0) but only triggers in the CI, probably because the CI is quicker and the command runs while the elements are not loaded yet.

Similar here. We use cypress 12.5.1 and @testing-library/cypress 9.0.0. Everything worked fine until yesterday when the test hung on cy.findAllByTestId and failed after the timeout. The issue happened only CI. Overwriting the element error message, as @jessezhang91 suggested, seems to fix it. We added that as a global cypress configuration to cypress/support/e2e.ts:

import { configure } from '@testing-library/cypress';

configure({
  getElementError(message, container) {
    const error = new Error(
      [message, container.tagName].filter(Boolean).join('\n\n'),
    );
    error.name = 'TestingLibraryElementError';
    return error;
  },
});

It looks like when the testing library error occurs, it breaks the retry-ability of the cypress and fails after the timeout. I wonder why it was working before and suddenly stopped working without any lib updates 🤔

i added this:

before(() => {
  cy.configureCypressTestingLibrary({
    getElementError(message, container) {
      const error = new Error(
        [message, container.tagName].filter(Boolean).join('\n\n'),
      );
      error.name = 'TestingLibraryElementError';
      return error;
    },
  });
});

to prevent prettyDOM from being called and this seems to be working now with the newer versions of testing-library/cypress

Thanks a lot for the workaround!! @jessezhang91