Testing-library/react-native使用expo-vector-icons时单元测试报错

报错由两个独立问题共同导致：

• Jest运行在纯JS环境，无法解析.ttf这类二进制字体文件，直接将二进制内容作为JS代码执行时触发SyntaxError: Invalid or unexpected token
• Expo生态依赖的原生模块（EXNativeModulesProxy、ExponentConstants等）没有对应JS环境实现，运行时抛出链接警告
  单独配置transformIgnorePatterns无效，是因为该配置仅控制哪些包需要走Babel转译，无法解决静态资源解析、原生模块缺失这两个核心问题。

1. 替换Jest预设为Expo官方测试预设 #

首先安装依赖：

npm install --save-dev jest-expo

在jest.config.js或package.json的jest配置段中，将preset设置为jest-expo，该预设内置了所有Expo核心原生模块的mock实现，直接解决原生模块链接警告。

2. 配置静态资源兜底mock #

在项目根目录创建__mocks__/fileMock.js，内容如下：

module.exports = 'test-file-stub';

在Jest配置中添加moduleNameMapper规则，将所有字体、图片、音视频等非JS资源映射到该mock文件，避免Jest尝试解析二进制内容：

moduleNameMapper: {
  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js'
}

3. 单独Mock矢量图标组件（可选但推荐） #

如果配置完上述步骤后仍存在图标相关报错，可在__mocks__目录下创建@expo/vector-icons.js（路径为__mocks__/@expo/vector-icons.js），内容如下，跳过图标字体加载逻辑，用纯文本组件替代真实图标渲染：

import React from 'react';
import { Text } from 'react-native';

const MockIcon = new Proxy({}, {
  get: (_, iconName) => (props) => <Text {...props}>{iconName}</Text>
});

export default MockIcon;
export const AntDesign = MockIcon;
export const Ionicons = MockIcon;
export const MaterialIcons = MockIcon;
export const FontAwesome = MockIcon;
// 项目中用到的其他图标集可按相同格式追加导出

4. 修正transformIgnorePatterns配置 #

确保transformIgnorePatterns不会排除Expo相关包的转译，参考配置如下：

transformIgnorePatterns: [
  'node_modules/(?!(jest-)?react-native|@react-native|@react-navigation|expo(nent)?|@expo(nent)?/.*|@unimodules/.*|react-native-svg|@expo/vector-icons)'
]

配置完成后执行命令清空Jest缓存，再重新运行测试即可：

npx jest --clearCache

内容的提问来源于stack exchange，提问作者Before The Empire