Jest + TS + Vite = RangeError: Invalid string length

kappys1 commented 11 months ago

@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.

alexkrolick commented 10 months ago

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.

MatanBobi commented 10 months ago

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.

shubhamranjan312 commented 1 month ago

RangeError: Invalid string length

shubhamranjan312 commented 1 month ago

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)

shubhamranjan312 commented 1 month ago

can i get a fix for it?

kappys1 commented 1 month ago

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.

testing-library / react-testing-library