Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
manish-jain-1 opened this issue Oct 18, 2019 · 0 comments

Comments

@manish-jain-1
Copy link

@manish-jain-1 manish-jain-1 commented Oct 18, 2019

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: #97 but none of the solutions worked for me.

Any ideas on how to fix this error? TIA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant