升级React Navigation 7后Jest测试报AnimatedValue错误的原因咨询

DevOps 小满

2026-4-8

我之前帮不少开发者排查过React Navigation版本升级后的Jest测试问题，你遇到的这个Error: AnimatedValue: Attempting to set value to undefined在RN7升级后挺常见的，主要和以下几个核心原因有关：

React Navigation 7的Animated内部实现变更：RN7对框架内部的Animated模块做了性能优化，调整了部分组件的动画初始化逻辑。在Jest的无头测试环境中，因为没有真正的原生UI渲染上下文，新的初始化逻辑可能无法正确设置AnimatedValue的默认值，进而触发"设置undefined"的错误。而RN6的Animated实现对测试环境的兼容性更好，不会出现这类初始化遗漏。
旧的Jest模拟配置不适配新版本：如果你之前针对RN6写过对react-native/Libraries/Animated的自定义mock，这些模拟逻辑大概率不兼容RN7的新API结构。比如RN7可能调整了AnimatedValue的导出方式或内部依赖，旧mock没有覆盖到这些变化，就会导致动画值初始化异常。
测试用例未适配异步挂载逻辑：RN7的导航组件挂载过程增加了一些异步初始化步骤（比如动画状态的预加载），如果你的测试用例没有用waitFor或act包裹渲染逻辑，可能会在组件还没完成动画初始化时就执行断言，从而捕获到未初始化的AnimatedValue。

给你几个快速排查和修复的方向：

更新Jest的Animated模拟配置，适配RN7的结构：

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
jest.mock('react-native/Libraries/Animated/Animated', () => {
  const actualAnimated = jest.requireActual('react-native/Libraries/Animated/Animated');
  return {
    ...actualAnimated,
    // 模拟timing动画，确保值能正确设置
    timing: (value, config) => ({
      start: (callback) => {
        value.setValue(config.toValue ?? 0);
        callback?.();
      },
    }),
    // 可选：模拟其他动画方法如spring
    spring: (value, config) => ({
      start: (callback) => {
        value.setValue(config.toValue ?? 0);
        callback?.();
      },
    }),
  };
});

在所有涉及导航组件的测试用例中，用waitFor包裹断言逻辑，确保组件完成初始化：

import { render, waitFor } from '@testing-library/react-native';
import YourNavigationStack from '../YourNavigationStack';

test('导航栈能正常渲染首页', async () => {
  render(<YourNavigationStack />);
  await waitFor(() => {
    expect(screen.getByTestId('home-screen')).toBeInTheDocument();
  });
});

检查自定义导航组件或钩子，移除对RN6中已废弃的Animated API的依赖，替换为RN7推荐的新API。

内容来源于stack exchange