使用Jest与React Testing Library时出现RangeError: Invalid string length问题

问题根源 #

1. 测试断言写法错误：你直接调用screen.getByText(/Text/i)并传给expect，这会导致getByText立即执行并抛出错误，而非让expect捕获错误。toThrow()需要包裹一个函数，否则断言逻辑完全失效。
2. Ionic DOM结构引发的字符串溢出：当getBy找不到元素时，React Testing Library会尝试打印整个DOM树生成错误提示，但Ionic组件渲染的DOM嵌套层级深、元素数量多，pretty-format库格式化这些DOM时会生成超长字符串，触发RangeError: Invalid string length。

正确解决方案 #

方案1：用queryBy方法测试元素不存在（推荐） #

queryBy找不到元素时返回null，不会抛出错误，完美适配元素不存在的测试场景，同时避免了打印整个DOM的问题：

import { render, screen } from "@testing-library/react";
import App from "./App";

test("some text should not be on screen", async () => {
  render(<App />);

  expect(screen.queryByText(/Text/i)).not.toBeInTheDocument();
});

方案2：修正getBy的断言写法 #

如果坚持使用getBy，必须将其包裹在函数中传给expect，让expect捕获抛出的错误：

import { render, screen } from "@testing-library/react";
import App from "./App";

test("some text should not be on screen", async () => {
  render(<App />);

  expect(() => screen.getByText(/Text/i)).toThrow();
});

但这种方式仍可能触发DOM打印的字符串溢出问题，优先推荐方案1。

额外优化：模拟AuthContext #

你的App依赖AuthContext，测试时若未提供上下文值，可能导致路由反复跳转（如<Redirect>），生成冗余DOM元素，加重字符串溢出问题。建议在测试中模拟上下文：

import { render, screen } from "@testing-library/react";
import App from "./App";
import { AuthContext } from "./contexts/AuthContext";

// 模拟AuthContext的默认值，可根据测试场景调整session状态
const mockAuthContext = {
  auth: {
    session: null
  }
};

test("some text should not be on screen", async () => {
  render(
    <AuthContext.Provider value={mockAuthContext}>
      <App />
    </AuthContext.Provider>
  );

  expect(screen.queryByText(/Text/i)).not.toBeInTheDocument();
});

这能确保App渲染预期的路由组件，减少不必要的DOM结构，进一步规避字符串溢出问题。

内容的提问来源于stack exchange，提问作者HotFix