如何用Jest模拟第三方React Native组件？遇NumericInput测试报错

问题一：这种情况正常吗？ #

完全正常！这个错误是Jest测试环境的典型问题——react-native-vector-icons依赖原生平台的图标资源（iOS的Assets或Android的字体文件），但Jest是纯JavaScript测试环境，无法加载这些原生资源。当NumericInput组件内部渲染Icon时，Jest找不到对应的原生实现，就会抛出这个TypeError。这不是你的代码或组件有问题，只是测试环境与真机运行环境的差异导致的。

问题二：为什么之前的Mock没成功？如何正确模拟？ #

你之前的mock方式过于简化，核心问题有两个：

1. 用jest.mock('xxx', () => 'ComponentName')返回的是字符串，而非有效的React组件，Jest渲染测试时无法识别这种“假组件”，自然会报错。
2. react-native-numeric-input内部直接依赖react-native-vector-icons的Icon组件，单独mock顶层组件或图标库为字符串，无法解决内部深层依赖的问题。

正确的Mock方案

这里提供两种可靠的解决方式，按需选择：

方案1：Mock react-native-vector-icons的Icon组件

在测试文件顶部或Jest全局配置文件（如jest.setup.js）中添加以下代码：

jest.mock('react-native-vector-icons/Ionicons', () => {
  const React = require('react');
  const { View } = require('react-native');
  
  // 返回一个模拟的Icon组件，用空View占位即可
  return class MockIcon extends React.Component {
    render() {
      return <View {...this.props} />;
    }
  };
});

注意：如果NumericInput使用的是其他图标库（如FontAwesome），把Ionicons换成对应的库名即可。

这个方案会把NumericInput内部引用的Icon替换为模拟组件，彻底避开原生依赖的问题，之后无需额外mockreact-native-numeric-input就能正常测试。

方案2：完整Mock react-native-numeric-input组件

如果你想直接替换整个NumericInput，需要返回符合React规范的模拟组件，而非字符串：

jest.mock('react-native-numeric-input', () => {
  const React = require('react');
  const { TextInput, View } = require('react-native');
  
  // 模拟一个具备核心功能的简易NumericInput
  return function MockNumericInput(props) {
    return (
      <View>
        <TextInput
          keyboardType="numeric"
          value={props.value?.toString()}
          onChangeText={(text) => props.onChange?.(parseInt(text) || 0)}
          {...props}
        />
      </View>
    );
  };
});

这个方案既避开了图标依赖问题，还保留了测试所需的核心交互逻辑（比如值变化回调），适合需要测试组件与NumericInput交互的场景。

内容的提问来源于stack exchange，提问作者Maxime Dupré