Advice on mocking animations

Hello, first off, thanks for an awesome component!

We’re trying to create a snapshot test using Jest for a component that uses react-native-modal. Upon running, it errors on initializeRegistryWithDefinitions.

We then tried mocking it with

import { View } from 'react-native';

const initializeRegistryWithDefinitions = jest.fn();
export {
  View,
  initializeRegistryWithDefinitions
};

which gave another error.

Any advice on what is the correct way to mock this? Ultimately I know we have to mock react-native-animatable which I already am doing above without initializeRegistryWithDefinitions 😃

[dcarrot2]

No worries, thanks for getting back to me!

Out of curiosity, why do you never test UI components?

So I tried mocking transitionTo without any luck. I think why it didn’t work is because modal utilizes React’s ref which react-test-renderer per here doesn’t support unless it is explicitly mocked out via createNodeMock but I guess it only does it for the component being tested and not any dependent components down the tree? (In this case, <MyComponent /> -> <Modal /> -> <Animatable’s Wrapped View />).

I was able to workaround by completely stubbing out via jest in my test.

import React from 'react';
import renderer from 'react-test-renderer';
import ItemFetchModal from '../../../app/components/inventory/item-fetch-modal';

jest.mock('react-native-modal', () => 'react-native-modal');

it('renders correctly', () => {
  const tree = renderer.create(<ItemFetchModal />).toJSON();
  expect(tree).toMatchSnapshot();
});

Thanks again for the response! 😄

[acailly]

I fixed this issue today for my specific usecase and without mocking all of react-native-modal, maybe that could help: https://github.com/oblador/react-native-animatable/issues/97#issuecomment-812448746