添加Rainbow Kit组件后，Create React App TS项目Jest测试失败求助

这个错误的核心原因是：@rainbow-me/rainbowkit 或其依赖的 web3 相关库（如 wagmi、viem）发布的是未经过转译的 ES 模块语法，而 Create React App 默认的 Jest 配置会忽略对 node_modules 目录下文件的转译处理。当 Jest 尝试解析这些库中的 import 语句时，因为没有转译为 CommonJS 模块，就会抛出「Cannot use import statement outside a module」的语法错误。

你需要修改 Jest 的配置，让它对指定的第三方库进行转译处理。由于 Create React App 不允许直接修改默认配置，推荐使用 craco（Create React App Configuration Override）来覆盖配置：

1. 安装 craco

npm install @craco/craco --save-dev
# 或
yarn add @craco/craco --dev

2. 在项目根目录创建 craco.config.js 文件，添加如下配置：

module.exports = {
  jest: {
    configure: {
      // 告诉 Jest 不要忽略这些库的转译
      transformIgnorePatterns: [
        'node_modules/(?!(@rainbow-me/rainbowkit|wagmi|viem)/)'
      ]
    }
  }
};

3. 修改 package.json 中的脚本命令，用 craco 替换 react-scripts：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

4. 重新运行测试命令，错误应该会被解决。

如果上述方法无效，可以尝试以下额外措施：

• 升级 @rainbow-me/rainbowkit、wagmi、viem 到最新稳定版本，新版本可能已经优化了 Jest 兼容性
• 如果你的项目使用了 react-app-rewired，可以在 config-overrides.js 中做类似的配置调整

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