chore: detect Modal as host component

Author: thiagobrez

src/config.ts

@@ -24,6 +24,7 @@ export type HostComponentNames = {
   text: string;
   textInput: string;
   switch: string;
+  modal: string;
 };
 
 export type InternalConfig = Config & {

src/helpers/host-component-names.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactTestInstance } from 'react-test-renderer';
-import { Switch, Text, TextInput, View } from 'react-native';
+import { Modal, Switch, Text, TextInput, View } from 'react-native';
 import { configureInternal, getConfig, HostComponentNames } from '../config';
 import { renderWithAct } from '../render-act';
 import { HostTestInstance } from './component-tree';
@@ -35,13 +35,15 @@ function detectHostComponentNames(): HostComponentNames {
         <Text testID="text">Hello</Text>
         <TextInput testID="textInput" />
         <Switch testID="switch" />
+        <Modal testID="modal" />
       </View>
     );
 
     return {
       text: getByTestId(renderer.root, 'text').type as string,
       textInput: getByTestId(renderer.root, 'textInput').type as string,
       switch: getByTestId(renderer.root, 'switch').type as string,
+      modal: getByTestId(renderer.root, 'modal').type as string,
     };
   } catch (error) {
     const errorMessage =
@@ -86,3 +88,13 @@ export function isHostTextInput(
 ): element is HostTestInstance {
   return element?.type === getHostComponentNames().textInput;
 }
+
+/**
+ * Checks if the given element is a host Modal.
+ * @param element The element to check.
+ */
+export function isHostModal(
+  element?: ReactTestInstance | null
+): element is HostTestInstance {
+  return element?.type === getHostComponentNames().modal;
+}

src/matchers/to-be-visible.tsx

@@ -2,6 +2,7 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
 import { StyleSheet } from 'react-native';
 import { getHostParent } from '../helpers/component-tree';
+import { isHostModal } from '../helpers/host-component-names';
 import { checkHostElement, formatElement } from './utils';
 
 function isVisibleForStyles(element: ReactTestInstance) {
@@ -19,7 +20,7 @@ function isVisibleForAccessibility(element: ReactTestInstance) {
 }
 
 function isModalVisible(element: ReactTestInstance) {
-  return element.type.toString() !== 'Modal' || element.props.visible !== false;
+  return !isHostModal(element) || element.props.visible !== false;
 }
 
 function isElementVisible(element: ReactTestInstance): boolean {