title: How to properly test React Native Modals using Jest and Native Testing Library
body: <p>I'm having a bit of a hard time understanding how to test my modal component. I'm using the <a href="https://github.com/jacklam718/react-native-modals" rel="noreferrer">react-native-modals</a> package and <a href="https://www.native-testing-library.com/" rel="noreferrer">@testing-library/react-native</a> with Jest. My component is a modal that pops up when a GraphQL error is passed to it. </p>
  
  <p><strong>./ErrorMessage.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { Dimensions, Text } from 'react-native';
  import Modal, { ModalContent, ScaleAnimation } from 'react-native-modals';
  import { theme } from '../styles/theme.styles';
  
  const ModalError = ({ error, onClose }) =&gt; {
    if (!error || !error.message) {
      return (
        &lt;Modal visible={false}&gt;
          &lt;Text /&gt;
        &lt;/Modal&gt;
      );
    }
  
    return (
      &lt;Modal
        visible
        modalAnimation={
          new ScaleAnimation({
            initialValue: 0,
            useNativeDriver: true,
          })
        }
        onTouchOutside={onClose}
        swipeDirection={['up', 'down', 'left', 'right']}
        swipeThreshold={200}
        onSwipeOut={onClose}
        modalStyle={modalStyle}
        overlayOpacity={0.7}
      &gt;
        &lt;ModalContent&gt;
          &lt;Text testID="graphql-error"&gt;{error.message}&lt;/Text&gt;
        &lt;/ModalContent&gt;
      &lt;/Modal&gt;
    );
  };
  
  ModalError.defaultProps = {
    error: {},
  };
  
  ModalError.propTypes = {
    error: PropTypes.object,
    onClose: PropTypes.func.isRequired,
  };
  
  export default ModalError;
  
  const window = Dimensions.get('window');
  
  const modalStyle = {
    backgroundColor: theme.lightRed,
    borderLeftWidth: 5,
    borderLeftColor: theme.red,
    width: window.width / 1.12,
  };
  
  </code></pre>
  
  <p>My test is pretty simple so far. I just want to make sure it's rendering the modal. I'm not exactly sure what needs to be mocked out here or how to do it.</p>
  
  <p><strong>./__tests__/ErrorMessage.test.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { MockedProvider } from '@apollo/react-testing';
  import { GraphQLError } from 'graphql';
  import { render } from '@testing-library/react-native';
  import Error from '../ErrorMessage';
  
  jest.mock('react-native-modals', () =&gt; 'react-native-modals');
  
  const error = new GraphQLError('This is a test error message.');
  const handleOnCloseError = jest.fn();
  
  describe('&lt;ErrorMessage&gt;', () =&gt; {
    it('should render an ErrorMessage modal component', () =&gt; {
      const { container } = render(
        &lt;MockedProvider&gt;
          &lt;Error error={error} onClose={handleOnCloseError} /&gt;
        &lt;/MockedProvider&gt;
      );
      expect(container).toMatchSnapshot();
    });
  });
  
  </code></pre>
  
  <p>The error that I'm getting is...</p>
  
  <pre class="lang-sh prettyprint-override"><code>TypeError: _reactNativeModals.ScaleAnimation is not a constructor
  
        18 |       visible
        19 |       modalAnimation={
      &gt; 20 |         new ScaleAnimation({
           |         ^
        21 |           initialValue: 0,
        22 |           useNativeDriver: true,
        23 |         })
  </code></pre>
  
  <p>And the snapshot is only printing...</p>
  
  <p><strong>./__tests__/__snapshots__/ErrorMessage.test.js.snap</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>// Jest Snapshot v1, 
  
  exports[`&lt;ErrorMessage&gt; should render an ErrorMessage modal component 1`] = `
  &lt;View
    collapsable={true}
    pointerEvents="box-none"
    style={
      Object {
        "flex": 1,
      }
    }
  /&gt;
  `;
  
  </code></pre>
  
  <p>How can I get past this error and make a proper snapshot?</p>