Chakra-UI V3测试运行失败：无法找到@ark-ui/react/format模块

问题核心 #

测试报错的根本原因是**@ark-ui/react版本与Chakra UI V3不匹配**：Chakra UI 3.0.0依赖的@ark-ui/react版本包含format子模块，但你当前安装的@ark-ui/react@4.3.0中不存在该模块，导致Jest解析失败。

解决方案 #

1. 升级@ark-ui/react到兼容版本 #

Chakra UI 3.0.0要求@ark-ui/react的版本至少为^5.0.0，执行以下命令升级：

npm install @ark-ui/react@^5.0.0

2. 清理依赖缓存并重新安装 #

依赖缓存可能导致不完整的模块安装，执行以下步骤重置依赖：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

3. 优化测试代码（非必需但规范） #

你的测试代码中存在重复嵌套Provider的问题（App组件内部已经包含Provider），可以简化为：

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

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

4. 调整Jest模块解析配置（可选） #

如果升级依赖后仍有问题，可在package.json的Jest配置中添加模块映射，确保Jest能正确解析@ark-ui/react的子模块：

"jest": {
  "transform": {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
  },
  "moduleNameMapper": {
    "^@ark-ui/react/(.*)$": "<rootDir>/node_modules/@ark-ui/react/dist/cjs/$1"
  }
}

验证 #

执行测试命令：

npm test

此时应该能正常加载Chakra UI相关模块，测试顺利执行。

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