React Native项目运行Jest测试时出现「Invariant Violation: Native Animated Module is not available」错误求解决

嘿，我之前帮好多个开发者搞定过这个问题，本质原因很简单：Jest是跑在Node.js环境里的，没法直接调用React Native的原生Animated模块，必须给它做个模拟（mock）才能让测试正常跑起来。下面给你几个最实用的解决方案，你可以根据自己的项目情况选：

方案1：单个测试文件快速修复 #

如果只有某几个测试文件遇到这个问题，直接在对应测试文件的顶部加上这段mock代码就行：

// 模拟NativeAnimatedHelper，直接解决模块不可用的错误
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

要是你的测试里用到了Animated.timing、Animated.spring这类动画方法，还可以给Animated模块做更完整的模拟，保证动画逻辑在测试里能正常触发：

jest.mock('react-native/Libraries/Animated/Animated', () => {
  const actualAnimated = jest.requireActual('react-native/Libraries/Animated/Animated');
  return {
    ...actualAnimated,
    // 模拟timing方法，确保start的回调能执行
    timing: (value, config) => ({
      start: (callback) => {
        if (callback) callback();
      },
      stop: jest.fn(),
    }),
    // 模拟spring方法
    spring: jest.fn().mockReturnValue({
      start: jest.fn(),
      stop: jest.fn(),
    }),
  };
});

方案2：全局配置，一劳永逸 #

如果项目里大部分测试都碰到这个问题，不如直接全局配置mock，不用每个文件都重复写代码：

1. 先在项目根目录新建（如果没有的话）jest.setup.js文件，在里面添加全局mock逻辑：

// 模拟NativeAnimatedHelper
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

// 如果你用了react-native-reanimated，还要补充这个mock
jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');
  // 修复mock中可能缺失的call方法
  Reanimated.default.call = () => {};
  return Reanimated;
});

2. 然后在你的Jest配置文件（jest.config.js或者package.json里的jest字段）中，把这个文件设置为全局启动文件：
   比如在jest.config.js里：

module.exports = {
  preset: 'react-native',
  // 其他已有的配置...
  setupFiles: ['./jest.setup.js'], // 加入这行
};

这样所有测试文件在运行前都会自动加载这个mock，再也不用手动加啦。

方案3：针对使用react-native-reanimated v2+的特殊处理 #

如果你的项目用了Reanimated 2及以上版本，除了上面的mock，还要调整Babel配置，避免测试环境下加载Reanimated的原生插件：
打开项目根目录的babel.config.js，修改成这样：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 只在非测试环境启用Reanimated插件
    process.env.NODE_ENV !== 'test' ? 'react-native-reanimated/plugin' : null,
  ].filter(Boolean), // 过滤掉null值，避免报错
};

这是因为Reanimated的Babel插件在Jest环境里会触发原生依赖相关的错误，所以测试时要禁用它。

小提示 #

如果你在测试中需要验证动画的回调逻辑，一定要确保你的mock实现覆盖了对应的方法。比如上面模拟Animated.timing时，我们在start方法里手动执行了传入的回调，这样测试里的断言就能正常触发，不会因为回调没执行而失败。

内容来源于stack exchange