react-native-animatable icon indicating copy to clipboard operation
react-native-animatable copied to clipboard

Error testing animated component - No animation registred by the name of slightFadeInUp

Open manish-jain-1 opened this issue 5 years ago • 0 comments

Cross-post: https://stackoverflow.com/questions/58458388/error-testing-animated-react-native-component

Environment: Mac/VSCode with below npm packages:

 "react": "16.6.3",
 "react-native": "0.57.8",
 "jest": "23.6.0",
 "babel-jest": "23.6.0",
 "react-native-animatable": "1.3.1",
 "react-test-renderer": "16.8.6",

Tried below in jest config:

"transformIgnorePatterns": [
            "node_modules/(?!(jest-)?react-native|react-navigation|react-native-animatable)"
        ],

Jest error message:

No animation registred by the name of slightFadeInUp

 at getCompiledAnimation (node_modules/react-native-animatable/createAnimatableComponent.js:78:13)
      at new AnimatableComponent (node_modules/react-native-animatable/createAnimatableComponent.js:290:201)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3459:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6785:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7742:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11413:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11445:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11528:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12416:7)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12328:7)

React component code snippet:

<Animatable.View
                key={index}
                {...commonAnimations.slightFadeInUp({
                    delay: INITIAL_DELAY + 50 + index * 100,
                    duration: 500
                })}
            >

Animatable.initializeRegistryWithDefinitions set with:

slightFadeInUp: {
        from: {
            opacity: 0,
            transform: [{ translateY: 60 }]
        },
        to: {
            opacity: 1,
            transform: [{ translateY: 0 }]
        }
    },

But looks like jest/react-test-renderer cannot see the global animation registrations and raises an exception in below library code:

function getCompiledAnimation(animation) {
  if (typeof animation === 'string') {
    const compiledAnimation = getAnimationByName(animation);
    if (!compiledAnimation) {
      throw new Error(`No animation registred by the name of ${animation}`);
    }
    return compiledAnimation;
  }
  return createAnimation(animation);
}

If this is a timing issue, I tried below but didn't make a difference:

 jest.useFakeTimers();
 jest.runAllTimers();

Here's a related thread on different mock examples for react-native-animatable: https://github.com/oblador/react-native-animatable/issues/97 but none of the solutions worked for me.

Any ideas on how to fix this error? TIA

manish-jain-1 avatar Oct 18 '19 22:10 manish-jain-1