react-native-animatable
react-native-animatable copied to clipboard
Error testing animated component - No animation registred by the name of slightFadeInUp
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