react-testing-library Jest + TS + Vite = RangeError: Invalid string length

@testing-library/react version: 14.0.0
Testing Framework and version:
- Jest: 29.6.2
- jest-environment-jsdom: 29.6.2
Other relevant dependencies:
- jest_workaround: 0.79.19
- jest-environment-jsdom: 29.6.2
- @swc/core: 1.3.71
- @swc/jest: 0.2.27
- vite: 4.3.2
- typescript: 5.0.2

Relevant code or config:

Example test

import { render, screen } from '@testing-library/react';
import { Element } from './element.test';

describe('renders the form correctly', () => {
    it('test to show form', async () => {

        render(
            <Element />
        );

        //await waitFor(() => {
            expect(screen.getByRole('textbox', { name: 'firstName'})).toBeInTheDocument();
        //});

    });

});

jest.setup.ts


import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';

jest.config.ts

export default {
    testEnvironment: 'jsdom',
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    moduleDirectories: ['node_modules', 'src'],
    transform: {
        '^.+\\.(js|jsx|ts|tsx)$': [
            '@swc/jest',
            {
                jsc: {
                    target: 'es2021',
                    parser: {
                        syntax: 'typescript',
                        tsx: false,
                        decorators: true,
                        dynamicImport: true,
                    },
                    transform: {
                        react: {
                            runtime: 'automatic',
                        },
                    },
                    experimental: {
                        plugins: [['jest_workaround', {}]], //workaround fixing this problem: https://github.com/swc-project/swc/discussions/7024
                    },
                },
            },
        ],
    },
    setupFilesAfterEnv: ['./jest.setup.ts'],
};

What you did:

Run my tests normally with the configuration above and it fails.

What happened:

when I run my tests, the error that appears is this one:

RangeError: Invalid string length

      at printObjectProperties (node_modules/pretty-format/build/collections.js:174:47)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:39:79
          at Array.map (<anonymous>)
      at printChildren (node_modules/@testing-library/dom/dist/DOMElementFilter.js:38:89)
      at Object.serialize (node_modules/@testing-library/dom/dist/DOMElementFilter.js:115:75)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)

and if I remove the transform in my .swcrc file get this error:

ReferenceError: React is not defined

Also, I have tried different solutions found on the internet like add this in jest.setup.ts file:

import React from 'react';
global.React = React;

But I get the first error mentioned above.

Problem description:

As I mention Above it occurs when I tried to run a normal test with testing library, the other ones without React code works fine.

Jul 28 '23 11:07 kappys1

I encountered the same RangeError when testing components that use ShadowDOM - seems like something is trying to serialize a circular structure that creates a massive string. Sometimes this causes tests to be very slow and others it only causes the prettyDOM call used for debugging failures to print an error instead of the DOM.

Aug 16 '23 14:08 alexkrolick

Hi @kappys1, thanks for opening this one. Since the code examples doesn't contain everything we need, to further investigate it, we'll need a minimal reproduction using github/codesandbox.

Aug 17 '23 06:08 MatanBobi

RangeError: Invalid string length

Jun 05 '24 08:06 shubhamranjan312

RangeError: Invalid string length

  at printListItems (node_modules/pretty-format/build/collections.js:142:19)
  at printComplexValue (node_modules/pretty-format/build/index.js:210:45)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)

Jun 05 '24 08:06 shubhamranjan312

can i get a fix for it?

Jun 05 '24 08:06 shubhamranjan312

can i get a fix for it?

It happens because you have an error in your test and makes a loop that it's not possible show in a readable way... then to display the error better I added this plugin shadow-dom-testing-library and it helps me to find the error and fix it.

It could have a very expensive cost... so I recommend only activate this when you have this kind of error and want to fix it.

How I implement it?

file: shadow-dom.js

import { screen } from 'shadow-dom-testing-library';

// jest env does not support CSSStyleSheet.replace method. Therefore before the test runs
// we need to polyfill the construct style sheet implementation.
// learn more: https://github.com/ionic-team/stencil/issues/2277
import 'construct-style-sheets-polyfill';

// Required to avoid the following Invalid string error
jest.mock('@testing-library/react', () => ({
  ...jest.requireActual('@testing-library/react'),
  screen,
}));

Include or remove this import to allow displaying the most readable error within your jest configuration file, in my case: setup.js:

import './shadow-dom';

I hope it helps a lot.

Jun 05 '24 09:06 kappys1