如何用 animation 开玩笑测试 React Native 屏幕？

Question

I have a React Native screen with some simple animation and I need to test it. Is there a way to test it using Jest? Do I need to mock the animations or listeners? If yes how I can do that since there isn't much information about it. Snapshot test is failing. How I can test the following screen:

import React, {useRef, useEffect} from 'react';
import {Text, View, Animated, TextInput} from 'react-native';
import styles from './style';

export const SomeScreen: React.FC<SomeScreenProps> = ({
  navigation,
}) => {
  const animation = useRef(new Animated.Value(0)).current;
  const inputRef = useRef<TextInput>();

  const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

  useEffect(() => {
    Animated.timing(animation, {
      toValue: 100,
      duration: 0,
      useNativeDriver: false,
    }).start(() => {
      navigation.navigate('next screen');
    });
    animation.addListener((v) => {
      if (inputRef?.current) {
        inputRef?.current.setNativeProps({
          text: `${Math.round(v.value)}`,
        });
      }
    });
    return () => {
      animation.removeAllListeners();
    };
  }, [animation, navigation]);

  const height = animation.interpolate({
    inputRange: [0, 100],
    outputRange: ['0%', '100%'],
    extrapolate: 'clamp',
  });

  return (
    <View>
      <View style={styles.container}>
          <Animated.View style={[styles.center, {height}]}>
              <AnimatedTextInput
                ref={inputRef}
                style={styles.number}
                editable={false}
              />
          </Animated.View>
        </View>
    </View>
  );
};

Here is the basic snapshot test:

test('Test description', () => {
    const component = (
      <Provider store={store}>
        <SomeScreen {...props} />
      </Provider>
    );
    const tree = render(component).toJSON();
    expect(tree).toMatchSnapshot();
});

Answer 1

If you have Animated component with ref property, react-test-renderer produce unreasonable huge snapshots. For big components you can get lengthRangeError because of that. Try to remove ref and check if snapshot passing.