react-native-animatable: Unable to run tests

I had the same issue, with an error saying TypeError: _this.backdropRef.transitionTo is not a function

After browsing all the mocks in this issue, I found that a modified version of @scerelli suggestion should work:

import React, { Component } from 'react'
import {
  View as CoreView,
  Image as CoreImage,
  Text as CoreText,
  Animated,
} from 'react-native'

export const createAnimatableComponent = (WrappedComponent) => {
  const Animatable = Animated.createAnimatedComponent(WrappedComponent)

  return class AnimatableComponent extends Component {
    handleRef = (ref) => {
      this.ref = ref
    }
    transition() {}
    stopAnimation() {}
    stopAnimations() {}
    transitionTo() {} // <-- this fixes the error "TypeError: _this.backdropRef.transitionTo is not a function"
    animate() { // <-- this was required in my specific example
      return { then: () => {} }
    }
    // mock any other function you using

    render() {
      return <Animatable ref={this.handleRef} {...this.props} />
    }
  }
}
export const initializeRegistryWithDefinitions = () => {}
export const View = createAnimatableComponent(CoreView)
export const Text = createAnimatableComponent(CoreImage)
export const Image = createAnimatableComponent(CoreText)

(original: https://github.com/oblador/react-native-animatable/issues/97#issuecomment-307377808)

I solved this way, under __mocks__ if using jest, create a react-native-animatable.js file with this:

import {
  View as CoreView,
  Image as CoreImage,
  Text as CoreText,
  Animated
 } from 'react-native';


export const createAnimatableComponent = (WrappedComponent) => {
  const Animatable = Animated.createAnimatedComponent(WrappedComponent);
  return class AnimatableComponent extends Component {
    handleRef = ref => {
      this.ref = ref;
    };
    transition() {}
    stopAnimation() {}
    stopAnimations() {}
   // mock any other function you using

    render() {

      return <Animatable ref={this.handleRef} {...this.props} />;
    }
  };
};
export const initializeRegistryWithDefinitions = () => {};
export const View = createAnimatableComponent(CoreView);
export const Text = createAnimatableComponent(CoreImage);
export const Image = createAnimatableComponent(CoreText);

This is the closest issue we found when trying to write a test for a component that uses react-native-animatable’s wrapped View component.

We were getting a TypeError: Cannot read property 'validAttributes' of undefined.

We got around this by mocking animatable and using RN’s View in our tests instead.

Under __mocks__ if using jest, create a react-native-animatable.js file with this:

import { View } from 'react-native';

export {
  View
};

This mock works for me

import React from 'react'
import { Image, Text } from 'react-native'

const createAnimatableComponent = Component => (
  class AnimatableComponent extends React.Component {
    render() {
      return <Component/>
    }
  }
)

const initializeRegistryWithDefinitions = jest.fn()

export {
  createAnimatableComponent,
  initializeRegistryWithDefinitions,
  Image,
  Text,
}

I have encountered a similar issue. As pointed out in Jest docs for react-native. Most of the NPM packages depend on babel transformations and don’t have their source code “pre-compiled” therefore errors are encountered. That’s where transformIgnorePatterns setting for Jest comes to play.

Adjusting settings to:

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

Solved any babel transformations related errors. However, a manual function mock is still required due to an error: TypeError: Animatable.createAnimatableComponent is not a function

Creating a __mocks__ folder on the project’s root directory (where node_modules folder resides) and a file react-native-animatable.js with the content of:

import React from 'react';

const createAnimatableComponent = Component => (
  class AnimatableComponent extends React.Component {
    render() {
      return <Component/>;
    }
  }
);

export {
  createAnimatableComponent
};

Solved all the issues for me. However, one might need to expand the manual mock based on the functionality used. Personally, I have used only createAnimatableComponent hence minimal manual mock was enough.

This partly works for me. It solves the TypeError on initializeRegistryWithDefinitions but therefore transitionTo is not working anymore because it uses the View component of ‘react-native’.

TypeError: _this.backdropRef.transitionTo is not a function

Can confirm, receiving same error as markhaasjes with:

└── react-native@0.44.3
└─┬ react-native-modal@2.5.0
  └── react-native-animatable@1.2.3

Don’t know about your test setup, but you probably just need to mock it.