score:0

when you do jest.mock('react-native-modals', () => 'react-native-modals'); you're replacing the whole library with the string 'react-native-modals' thus when you use it in your component it fails. You need to return a full mocked implementation from your mock function (second argument to jest.mock). It's also possible auto-mocking may work for you which would be done by simply doing: jest.mock('react-native-modals');

Here's the docks for jest.mock() with some examples of the various ways to use it: https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options.

score:0

// components/Example/index.tsx
import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Modal from 'react-native-modal';

const Example: React.FC = () => {
  const [isPrivacyPolicyVisible, setIsPrivacyPolicyVisible] = useState(false);

  return (
    <>
      <Pressable onPress={() => setIsPrivacyPolicyVisible(true)}>
        <Text>Privacy Policy</Text>
      </Pressable>

      <Modal
        accessibilityLabel="privacy-policy-modal"
        isVisible={isPrivacyPolicyVisible}>
        <Text>Content</Text>
      </Modal>
    </>
  );
};

export default Example;
// components/Example/index.test.tsx
import React from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react-native';

import { Example } from 'components';

describe('Example Component', () => {
  it('should render privacy policy.', async () => {
    // Arrange
    const { queryByText, queryByA11yLabel } = render(<Example />);

    const button = queryByText(/privacy policy/i);
    const modal = queryByA11yLabel('privacy-policy-modal');

    // Act and Assert
    expect(button).toBeTruthy();
    expect(modal).toBeTruthy();
    expect(modal.props).toMatchObject({
      visible: false,
    });
  });

  it('should show privacy policy modal.', async () => {
    // Arrange
    const { queryByText, queryByA11yLabel } = render(<Example />);

    const button = queryByText(/privacy policy/i);
    const modal = queryByA11yLabel('privacy-policy-modal');

    // Act
    await waitFor(() => {
      fireEvent.press(button);
    });

    // Assert
    expect(modal.props).toMatchObject({
      visible: true,
    });
  });
});

score:1

you can use this -> https://github.com/testing-library/jest-native

In react native component,
...
<Modal
        testID="test-modal"
        deviceWidth={deviceWidth}
        deviceHeight={deviceHeight}
        isVisible={isModalVisible}.  // isModalVisible = useState(true or false)
        onBackdropPress={toggleModal}
        backdropOpacity={0.5}
 >
...

In test component,
...
const test = getByTestId("test-modal");
expect(test).toHaveProp("visible", true);   // test success ! 
...

Related Query

More Query from same tag