refactor: detect Image host component name

Author: mdjastrzebski

src/__tests__/host-component-names.test.tsx

@@ -14,6 +14,7 @@ describe('getHostComponentNames', () => {
       hostComponentNames: {
         text: 'banana',
         textInput: 'banana',
+        image: 'banana',
         switch: 'banana',
         scrollView: 'banana',
         modal: 'banana',
@@ -23,6 +24,7 @@ describe('getHostComponentNames', () => {
     expect(getHostComponentNames()).toEqual({
       text: 'banana',
       textInput: 'banana',
+      image: 'banana',
       switch: 'banana',
       scrollView: 'banana',
       modal: 'banana',
@@ -37,6 +39,7 @@ describe('getHostComponentNames', () => {
     expect(hostComponentNames).toEqual({
       text: 'Text',
       textInput: 'TextInput',
+      image: 'Image',
       switch: 'RCTSwitch',
       scrollView: 'RCTScrollView',
       modal: 'Modal',
@@ -67,6 +70,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
     expect(getConfig().hostComponentNames).toEqual({
       text: 'Text',
       textInput: 'TextInput',
+      image: 'Image',
       switch: 'RCTSwitch',
       scrollView: 'RCTScrollView',
       modal: 'Modal',
@@ -78,6 +82,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
       hostComponentNames: {
         text: 'banana',
         textInput: 'banana',
+        image: 'banana',
         switch: 'banana',
         scrollView: 'banana',
         modal: 'banana',
@@ -89,13 +94,14 @@ describe('configureHostComponentNamesIfNeeded', () => {
     expect(getConfig().hostComponentNames).toEqual({
       text: 'banana',
       textInput: 'banana',
+      image: 'banana',
       switch: 'banana',
       scrollView: 'banana',
       modal: 'banana',
     });
   });
 
-  test('throw an error when autodetection fails', () => {
+  test('throw an error when auto-detection fails', () => {
     const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
     const renderer = TestRenderer.create(<View />);
 

src/config.ts

@@ -23,6 +23,7 @@ export type ConfigAliasOptions = {
 export type HostComponentNames = {
   text: string;
   textInput: string;
+  image: string;
   switch: string;
   scrollView: string;
   modal: string;

src/helpers/host-component-names.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactTestInstance } from 'react-test-renderer';
-import { Modal, ScrollView, Switch, Text, TextInput, View } from 'react-native';
+import { Image, Modal, ScrollView, Switch, Text, TextInput, View } from 'react-native';
 import { configureInternal, getConfig, HostComponentNames } from '../config';
 import { renderWithAct } from '../render-act';
 import { HostTestInstance } from './component-tree';
@@ -34,6 +34,7 @@ function detectHostComponentNames(): HostComponentNames {
       <View>
         <Text testID="text">Hello</Text>
         <TextInput testID="textInput" />
+        <Image testID="image" />
         <Switch testID="switch" />
         <ScrollView testID="scrollView" />
         <Modal testID="modal" />
@@ -43,6 +44,7 @@ function detectHostComponentNames(): HostComponentNames {
     return {
       text: getByTestId(renderer.root, 'text').type as string,
       textInput: getByTestId(renderer.root, 'textInput').type as string,
+      image: getByTestId(renderer.root, 'image').type as string,
       switch: getByTestId(renderer.root, 'switch').type as string,
       scrollView: getByTestId(renderer.root, 'scrollView').type as string,
       modal: getByTestId(renderer.root, 'modal').type as string,
@@ -85,6 +87,14 @@ export function isHostTextInput(element?: ReactTestInstance | null): element is
   return element?.type === getHostComponentNames().textInput;
 }
 
+/**
+ * Checks if the given element is a host Image element.
+ * @param element The element to check.
+ */
+export function isHostImage(element?: ReactTestInstance | null): element is HostTestInstance {
+  return element?.type === getHostComponentNames().image;
+}
+
 /**
  * Checks if the given element is a host Switch element.
  * @param element The element to check.