Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jest + TS + Vite = RangeError: Invalid string length #1230

Open
kappys1 opened this issue Jul 28, 2023 · 6 comments
Open

Jest + TS + Vite = RangeError: Invalid string length #1230

kappys1 opened this issue Jul 28, 2023 · 6 comments
Labels
needs more information

Comments

@kappys1
Copy link

kappys1 commented Jul 28, 2023

  • @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
Copy link
Collaborator

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
Copy link
Member

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
Copy link 

RangeError: Invalid string length

@shubhamranjan312
Copy link

shubhamranjan312 commented Jun 5, 2024 •
edited

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
Copy link

can i get a fix for it?

@kappys1
Copy link
Author

kappys1 commented Jun 5, 2024 •
edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs more information
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@alexkrolick @kappys1 @MatanBobi @shubhamranjan312