2

I'm currently trying to figure out how to test reanimated 2 animations using useSharedValue.

What makes 0 sense to me is the example given from reanimated.

https://github.com/software-mansion/react-native-reanimated/blob/master/tests/SharedValue.test.js

If the button is supposed to increment its sharedValue by 1 every time you press it. Why would you write a test that shows it does NOT change???

I've tried it myself and yea, the value does not update itself.

I want to assert that the value has changed in my test:

ParallaxScrollView.tsx

const scrollY = useSharedValue(0);

const onScroll = useAnimatedScrollHandler((event) => {
    scrollY.value = event.contentOffset.y;
});
return (
    <Animated.Image
        style={{height: scrollY}}
        testID="header-image"
        source={{ uri: headerImage }}
        resizeMode="cover"
    />
)

ParallaxScrollView.test.tsx

const { getByTestId } = render(<ParallaxScrollView {...defaultProps} />);
const headerImage = getByTestId('header-image');
const content = getByTestId('parallax-content');

const eventData = {
  nativeEvent: {
    contentOffset: {
      y: 100,
    },
  },
};

fireEvent.scroll(content, eventData);

expect(headerImage).toHaveAnimatedStyle({ height: 100 }); //Received is 0
Thomas Charlesworth
  • 1,789
  • 5
  • 28
  • 53

1 Answers1

3

useAnimatedScrollHandler uses react-native-gesture-handler to handle events but at this moment gesture-handler doesn't support events in tests yet, this is what I am working on. Look at this - https://github.com/software-mansion/react-native-gesture-handler/pull/1762
I think this will be available soon. If you want to be up to date, please open an issue in the Reanimated Github.

piaskowyk
  • 81
  • 5
  • Finally, I have found the answer after I spend a half day. for other people, please read this carefully because I ignored it at first. – Pranat Pannao Feb 17 '23 at 12:46