使用@expo/vector-icons的组件运行正常但Jest测试失败如何解决？

问题原因 #

• 实际运行时App在Expo完整运行环境中加载，@expo/vector-icons的组件可以正常导出和渲染；但Jest测试环境默认不会对原生相关的依赖做适配处理，@expo/vector-icons没有被正确mock，导致你导入的Ionicons实际是undefined，渲染时就触发了「元素类型无效」的报错。

解决方法 #

方法1：使用@expo/vector-icons自带的mock（最简便）

在项目的Jest配置文件（一般是jest.config.js，或者package.json里的jest字段）中添加如下配置：

// jest.config.js 写法
module.exports = {
  // 其他原有配置保留
  moduleNameMapper: {
    '@expo/vector-icons': '@expo/vector-icons/jest/mock'
  }
}

如果是写在package.json中的配置：

{
  "jest": {
    "moduleNameMapper": {
      "@expo/vector-icons": "@expo/vector-icons/jest/mock"
    }
  }
}

方法2：手动mock @expo/vector-icons

如果方法1不生效，可以手动创建mock文件：

1. 在项目根目录创建__mocks__/@expo/vector-icons.js文件，内容如下：

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

export const Ionicons = (props) => <View testID="Ionicons" {...props} />;
// 如果用到其他图标库也可以在这里扩展，比如：
// export const AntDesign = (props) => <View testID="AntDesign" {...props} />;

2. 在Jest配置中添加忽略转换规则：

module.exports = {
  // 其他原有配置保留
  transformIgnorePatterns: [
    "node_modules/(?!(jest-)?@?react-native|@expo/vector-icons)"
  ]
}

验证生效

配置修改后先清除Jest缓存再运行测试，避免缓存导致配置不生效：

npx jest --clearCache

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