React-native-modal: Advice on mocking animations

[dcarrot2]

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 :)

[mmazzarolo]

Hi there! Sorry if I didn't answer quickly but I'm on the other side of the hemisphere.

I'll be honest with you, I never test UI components, so I probably won't fit for the purpose of the issue.

Anyway, from a quick inspection to the code and to react-native-animatable issues (got you!) it seems that you're mocking react-native-animatable's View using the original react-native's View, which misses the transitionTo method.
You should mock this method too (on the View) in my opinion.

import { View } from 'react-native';

View.transitionTo = () => null; // (Or jest.fn or whatever you use for mocking functions)

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

Let me know if it works (or if it is just nonsense).

[mmazzarolo]

Keep in mind that if the above solution works, you should also mock the methods called here, which might be a bit harder because they are customizable: [this.props.animationIn] is in fact the animationIn prop passed to the modal.

[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, -> -> ).

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! :smile:

[mmazzarolo]

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

Mostly because of time constraints. If I have to choose in which kind of test I should invest my time I always go for unit tests on the logic of the apps since UI components change too frequently for my tastes (that's one of the reasons I love Jest snapshots).

Glad you fixed it anyway man 💃