axelra-ag / react-native-animateable-text

🆎 A fork of React Native's <Text/> component that supports Reanimated Shared Values as text!
https://www.npmjs.com/package/react-native-animateable-text
MIT License
376 stars 27 forks source link

Jest test failed #16

Closed Francesco-Voto closed 2 weeks ago

Francesco-Voto commented 3 years ago

Description

I try to implement some test via Jest and @testing-library/react-native, but I encountered this error:

TypeError: Cannot read property 'getScrollableNode' of null

Code

I use the Component together with Reanimated 2 in this way:

 const currentValue = useSharedValue(0);

  const animatedText = useDerivedValue(() =>
    withTiming(currentValue.value, {
      duration: 1000,
      easing: Easing.inOut(Easing.linear),
    }),
  );

  const animatedProps = useAnimatedProps(() => {
    return {
      text: animatedText.value,
    };
  });

  useEffect(() => {
    currentValue.value = value;
  }, [currentValue, value]);

  return (
    <AnimateableText
      animatedProps={animatedProps}
    />

The code works perfectly as expected, Just tests failed with error above

Packages

Any idea?

JonnyBurger commented 3 years ago

Sorry for the late reply. I don't know, maybe a mock is missing. We are working on improving some of our tests, if I get a chance I'll check it out as well.

cam-shaw commented 2 months ago

Ran into this after doing library upgrades for react-native 0.74.x and reanimated (as well as a few other libraries). If you want to simply bypass the error just add this to your __mocks__ directory. Not perfect at all because it's nullifying the animated part of this library but your tests will hopefully pass and text will render.

// in __mocks__/react-native-animateable-text.js
const {Text} = require('react-native');

export default ({animatedProps, style}) => {
  return (
    <Text style={[style, {color: animatedProps.initial.value.color}]}>
      {animatedProps.initial.value.text}
    </Text>
  );
};