Testing Utilities

/**
 * Sets up Jest testing environment for Reanimated testing
 * @param framerateConfig - Optional framerate configuration for animations
 */
function setUpTests(framerateConfig?: { fps?: number }): void;

import { setUpTests } from "react-native-reanimated";

// Basic setup with default 60fps
setUpTests();

// Custom framerate for testing
setUpTests({ fps: 30 });

// In your test setup file (setupTests.js)
beforeAll(() => {
  setUpTests();
});

/**
 * @deprecated Use jest.advanceTimersByTime directly
 * Advances animation by specified time in milliseconds
 * @param time - Time in milliseconds to advance (default: frame time)
 */
function advanceAnimationByTime(time?: number): void;

/**
 * @deprecated Use jest.advanceTimersByTime directly  
 * Advances animation by specified number of frames
 * @param count - Number of frames to advance
 */
function advanceAnimationByFrame(count: number): void;

/**
 * @deprecated Define your own before/after test hooks
 * Wraps animation test with fake timers setup and cleanup
 * @param animationTest - Test function to execute
 */
function withReanimatedTimer(animationTest: () => void): void;

import { 
  advanceAnimationByTime, 
  advanceAnimationByFrame,
  withReanimatedTimer 
} from "react-native-reanimated";

// Deprecated - use jest.advanceTimersByTime(16) instead
advanceAnimationByTime(16);

// Deprecated - use jest.advanceTimersByTime(count * 16) instead  
advanceAnimationByFrame(5);

// Deprecated - set up your own before/after hooks
withReanimatedTimer(() => {
  // Your animation test code
});

describe('Animation Tests', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.runOnlyPendingTimers();
    jest.useRealTimers();
  });

  it('should animate properly', () => {
    // Start animation
    triggerAnimation();
    
    // Advance by 16ms (one frame at 60fps)
    jest.advanceTimersByTime(16);
    
    // Your assertions
    expect(component).toHaveAnimatedStyle({ opacity: 0.5 });
  });
});

/**
 * Gets the current animated style from a test component
 * @param component - React test instance of an animated component
 * @returns Current animated style object
 */
function getAnimatedStyle(component: ReactTestInstance): DefaultStyle;

import { getAnimatedStyle } from "react-native-reanimated";
import { render } from "@testing-library/react-native";

const MyAnimatedComponent = () => {
  const opacity = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  return <Animated.View style={animatedStyle} testID="animated-view" />;
};

it('should have correct animated style', () => {
  const { getByTestId } = render(<MyAnimatedComponent />);
  const component = getByTestId('animated-view');
  
  const style = getAnimatedStyle(component);
  expect(style.opacity).toBe(1);
});

// Jest matcher interface
interface Matchers<R> {
  toHaveAnimatedStyle(
    style: Record<string, unknown> | Record<string, unknown>[],
    config?: { shouldMatchAllProps?: boolean }
  ): R;
}

import Animated, { useSharedValue, useAnimatedStyle } from "react-native-reanimated";

const AnimatedComponent = ({ testID }: { testID: string }) => {
  const scale = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: 0.8,
  }));

  return <Animated.View style={animatedStyle} testID={testID} />;
};

describe('Animated Style Tests', () => {
  it('should have correct animated style', () => {
    const { getByTestId } = render(<AnimatedComponent testID="test" />);
    const component = getByTestId('test');

    // Basic style assertion
    expect(component).toHaveAnimatedStyle({
      opacity: 0.8,
    });

    // Transform assertion
    expect(component).toHaveAnimatedStyle({
      transform: [{ scale: 1 }],
    });

    // Multiple properties
    expect(component).toHaveAnimatedStyle({
      opacity: 0.8,
      transform: [{ scale: 1 }],
    });

    // Match all properties exactly
    expect(component).toHaveAnimatedStyle({
      opacity: 0.8,
      transform: [{ scale: 1 }],
    }, { shouldMatchAllProps: true });
  });
});

// Jest matcher interface  
interface Matchers<R> {
  toHaveAnimatedProps(props: Record<string, unknown>): R;
}

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

const MyComponent = () => {
  const fontSize = useSharedValue(16);
  const animatedProps = useAnimatedProps(() => ({
    placeholder: fontSize.value > 18 ? "Large text" : "Small text",
    maxLength: Math.floor(fontSize.value * 2),
  }));

  return (
    <AnimatedTextInput
      animatedProps={animatedProps}
      testID="animated-input"
    />
  );
};

it('should have correct animated props', () => {
  const { getByTestId } = render(<MyComponent />);
  const component = getByTestId('animated-input');

  expect(component).toHaveAnimatedProps({
    placeholder: "Small text",
    maxLength: 32,
  });
});

interface FramerateConfig {
  /** Frames per second for animation testing (default: 60) */
  fps?: number;
}

interface ToHaveAnimatedStyleConfig {
  /** Whether to match all properties exactly (default: false) */
  shouldMatchAllProps?: boolean;
}

type TestComponent = React.Component<
  AnimatedComponentProps<InitialComponentProps> & {
    jestAnimatedStyle?: { value: DefaultStyle };
    jestAnimatedProps?: {
      value: Partial<AnimatedComponentProps<AnimatedProps>>;
    };
  }
>;

type DefaultStyle = Record<string, unknown>;

// setupTests.js
import { setUpTests } from "react-native-reanimated";

// Set up Reanimated testing utilities
setUpTests();

// Optional: Custom framerate for slower devices or specific testing needs
// setUpTests({ fps: 30 });

describe('Component Animations', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.runOnlyPendingTimers();
    jest.useRealTimers();
  });

  it('should animate opacity from 0 to 1', () => {
    const { getByTestId } = render(<FadeInComponent testID="fade" />);
    const component = getByTestId('fade');

    // Initial state
    expect(component).toHaveAnimatedStyle({ opacity: 0 });

    // Trigger animation
    fireEvent.press(getByTestId('trigger-button'));

    // Advance animation
    jest.advanceTimersByTime(500); // 500ms into animation

    // Check intermediate state
    expect(component).toHaveAnimatedStyle({ opacity: 0.5 });

    // Complete animation
    jest.advanceTimersByTime(500);

    // Check final state
    expect(component).toHaveAnimatedStyle({ opacity: 1 });
  });
});