React Native Expo项目Jest测试expo-constants extra属性读取报错解决

AI 小北

2026-7-18

问题：React Native Expo测试中读取Constants.expoConfig.extra报错

错误详情

测试时触发如下TypeError：

TypeError: Cannot read properties of undefined (reading 'extra')

       9 | import { Database } from "../interfaces/supabase";
      10 |
    > 11 | let supabaseUrl = Constants.expoConfig.extra.supabaseUrl;
         |                                        ^
      12 | if (supabaseUrl === "http://10.0.2.2:54321") {
      13 |   const uri = `http://${Constants.expoConfig?.hostUri
      14 |     ?.split(":")

      at Object.extra (src/supabase/supabase.ts:11:40)
      at Object.require (src/utils/savePost.ts:2:1)
      at Object.require (src/screens/MapScreen/index.tsx:46:1)
      at Object.require (src/screens/MapScreen/MapScreen.test.tsx:9:1)

当前尝试的Mock方案

已创建tests/mocks/expo-constants.ts：

const expoConstantsMock = {
  expoConfig: {
    extra: {
      supabaseUrl: "https://id.supabase.co",
      anonKey:  "key",
      bucket: "bucket-dev",
    },
  },
};

jest.mock("expo-constants", () => expoConstantsMock);

并在package.json的jest配置中添加：

"moduleNameMapper": {
      "^expo-constants$": "<rootDir>/tests/mocks/expo-constants.ts"
    },

修复方案

调整Mock导出逻辑
当前Mock文件中直接调用jest.mock会引发重复Mock冲突，改为直接导出Mock对象即可：
修改tests/mocks/expo-constants.ts：
```
export default {
  expoConfig: {
    extra: {
      supabaseUrl: "https://id.supabase.co",
      anonKey:  "key",
      bucket: "bucket-dev",
    },
  },
};
```
校验Mock路径准确性
确认package.json中的<rootDir>指向项目根目录，若tests目录结构不同，需对应调整moduleNameMapper中的路径。
业务代码添加可选链增强鲁棒性
在读取配置的代码中加入可选链，避免因配置未加载完全导致的报错：
```
let supabaseUrl = Constants.expoConfig?.extra?.supabaseUrl;
```
排查Mock覆盖问题
检查Jest配置的setupFilesAfterEnv或setupFiles中是否有其他代码重新Mock了expo-constants，确保当前Mock的优先级。