Jest + TS + Vite = RangeError: Invalid string length

オープン

#1,230 2023年7月28日に作成コメント 7 件リアクション 1 件担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度: 4/5
見積もり時間: 3〜5日
初心者へのやさしさ: 28/100

issue の種類: バグ
明瞭さ: おおむね明確
活発さ: 停滞
技術スタック: javascript, react, typescript, vite
領域: frontend, testing-qa

調査の方向性

サンプルテスト、jest.config.ts、jest.setup.tsから始め、指定された Jest、jsdom、React Testing Library、Vite、TypeScript、@swc/jest のバージョンを使って失敗を再現します。transform の有無で実行結果を比較し、証拠として pretty-format と DOMElementFilter の stack trace を使用します。完了条件は、報告された2つのエラーのどちらも発生せずに React テストが実行されることです。

索引モデルが issue の本文から書いたものです。

説明

needs more information

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

主要言語: JavaScript
スター: 19.7k
フォーク: 1.2k
PR マージ指標: 30日以内にマージされた PR はありません

環境構築

Dockerfile・Docker Compose ファイルなし
プルリクエストのテンプレートあり
コントリビューションガイドを読む

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
リポジトリをフォークし、ブランチを切って変更します。
issue 番号を参照したプルリクエストを送ります。

testing-library/react-testing-library のほかの issue

fireEvent.select does not wrap its automatic native focus in act
対応中かも @sergioperezcheco が 6 日前に担当しました。オープン
- 何か問題がありますか？
難易度 2/5 1〜3時間初心者へのやさしさ 88/100

testing-library/react-testing-library#1471 · 2026年10月7日に作成
bug: calling configure() without reactStrictMode resets it to undefined, silently disabling strict mode
再び着手できるかも @suhailopensource が 76 日前に担当しましたが、オープン中のプルリクエストはありません。オープン
- 何か問題がありますか？
難易度 2/5 1〜3時間初心者へのやさしさ 35/100

testing-library/react-testing-library#1466 · コメント 1 件 · 2026年7月21日に作成
Security: bare `testing-library` npm namespace held by third party — baitsquatting risk
オープン
- 何か問題がありますか？
難易度 4/5 3〜5日初心者へのやさしさ 30/100

testing-library/react-testing-library#1459 · コメント 2 件 · 2026年4月20日に作成
perf: optimize container lookup with early exit
再び着手できるかも @Ch-Abhinav-Chowdary が 302 日前に担当しましたが、オープン中のプルリクエストはありません。オープン
- 何か問題がありますか？
難易度 1/5 1時間未満初心者へのやさしさ 35/100

testing-library/react-testing-library#1430 · コメント 1 件 · 2025年12月2日に作成
`fireEvent.mouseEnter` does not forward `relatedTarget` (relatedTarget is the window instead)
対応中かも @swarnim02 が 320 日前に担当しました。オープン
- 何か問題がありますか？
難易度 3/5 1〜2日初心者へのやさしさ 55/100

testing-library/react-testing-library#1422 · 2025年10月29日に作成

testing-library/react-testing-library の issue をすべて見る

似ている issue

check-env-docs: fail on documented variables the code no longer reads
オープン
- 何か問題がありますか？
area: docs good first issue

難易度 2/5 1〜3時間初心者へのやさしさ 64/100

XAGI-Lab/melra#77 · 2026年10月13日に作成

メンテナーはふだん 1 日以内に返信
Tooltip "Repeat test" from "Status and interface options" stays on screen
オープン
- 何か問題がありますか？
Support

難易度 2/5 1〜3時間初心者へのやさしさ 72/100

sabnzbd/sabnzbd#3659 · 2026年10月13日に作成

メンテナーはふだん 1 日以内に返信
`Viewer.isMouseNavEnabled()` always returns `undefined`
オープン
- 何か問題がありますか？
難易度 2/5 1〜3時間初心者へのやさしさ 72/100

openseadragon/openseadragon#2996 · 2026年10月13日に作成

メンテナーはふだん 3 日以内に返信
Leading "#" results in 'undefined'
オープン
- 何か問題がありますか？
難易度 2/5 1〜3時間初心者へのやさしさ 75/100

jfromaniello/url-join#134 · 2026年10月13日に作成
Strict mode accepts a CDATA section outside the root element
オープン
- 何か問題がありますか？
難易度 2/5 1〜3時間初心者へのやさしさ 74/100

isaacs/sax-js#298 · 2026年10月13日に作成

JavaScript の issue をもっと見る

Jest + TS + Vite = RangeError: Invalid string length

何か問題がありますか？

評価

調査の方向性

説明

Relevant code or config:

What you did:

What happened:

Problem description:

環境構築

はじめの一歩

testing-library/react-testing-library のほかの issue

何か問題がありますか？

何か問題がありますか？

何か問題がありますか？

何か問題がありますか？

何か問題がありますか？

似ている issue

何か問題がありますか？

何か問題がありますか？

何か問題がありますか？

何か問題がありますか？

何か問題がありますか？

新しい issue をメールで受け取る