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 · 2 comments
Open

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

kappys1 opened this issue Jul 28, 2023 · 2 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.

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
3 participants
@alexkrolick @kappys1 @MatanBobi