fix: add prop to render to skip configureHostComponentNamesIfNeeded (#1425)

* Add prop to render to skip componentnamesconfig

* refactor: render internal with extra options

* refactor: apply renderInternal to renderHook

* chore: add tests to check for single render

* refactor: simplify code

* refactor: finishing touches

* chore: fix lint

---------

Co-authored-by: Maciej Jastrzębski <[email protected]>

Author: KrastanD

src/__tests__/render.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { View, Text, TextInput, Pressable } from 'react-native';
+import { getConfig, resetToDefaults } from '../config';
 import { render, screen, fireEvent, RenderAPI } from '..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
@@ -242,6 +243,14 @@ test('RenderAPI type', () => {
 test('returned output can be spread using rest operator', () => {
   // Next line should not throw
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { rerender, ...rest } = render(<View testID="inner" />);
+  const { rerender, ...rest } = render(<View testID="test" />);
   expect(rest).toBeTruthy();
 });
+
+test('render calls detects host component names', () => {
+  resetToDefaults();
+  expect(getConfig().hostComponentNames).toBeUndefined();
+
+  render(<View testID="test" />);
+  expect(getConfig().hostComponentNames).not.toBeUndefined();
+});

src/__tests__/renderHook.test.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import TestRenderer from 'react-test-renderer';
 import { renderHook } from '../pure';
 
 test('gives comitted result', () => {
@@ -94,3 +95,20 @@ test('props type is inferred correctly when initial props is explicitly undefine
 
   expect(result.current).toBe(6);
 });
+
+/**
+ * This test makes sure that calling renderHook does
+ * not try to detect host component names in any form.
+ * But since there are numerous methods that could trigger that
+ * we check the count of renders using React Test Renderers.
+ */
+test('does render only once', () => {
+  jest.spyOn(TestRenderer, 'create');
+
+  renderHook(() => {
+    const [state, setState] = React.useState(1);
+    return [state, setState];
+  });
+
+  expect(TestRenderer.create).toHaveBeenCalledTimes(1);
+});

src/helpers/accessiblity.ts

@@ -4,8 +4,8 @@ import {
   StyleSheet,
 } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
-import { getConfig } from '../config';
 import { getHostSiblings } from './component-tree';
+import { getHostComponentNames } from './host-component-names';
 
 type IsInaccessibleOptions = {
   cache?: WeakMap<ReactTestInstance, boolean>;
@@ -99,8 +99,7 @@ export function isAccessibilityElement(
     return element.props.accessible;
   }
 
-  const hostComponentNames = getConfig().hostComponentNames;
-
+  const hostComponentNames = getHostComponentNames();
   return (
     element?.type === hostComponentNames?.text ||
     element?.type === hostComponentNames?.textInput ||

src/render.tsx

@@ -13,27 +13,41 @@ import { renderWithAct } from './render-act';
 import { setRenderResult, screen } from './screen';
 import { getQueriesForElement } from './within';
 
-export type RenderOptions = {
+export interface RenderOptions {
   wrapper?: React.ComponentType<any>;
   createNodeMock?: (element: React.ReactElement) => any;
   unstable_validateStringsRenderedWithinText?: boolean;
-};
+}
 
 export type RenderResult = ReturnType<typeof render>;
 
 /**
- * Renders test component deeply using react-test-renderer and exposes helpers
+ * Renders test component deeply using React Test Renderer and exposes helpers
  * to assert on the output.
  */
 export default function render<T>(
+  component: React.ReactElement<T>,
+  options: RenderOptions = {}
+) {
+  return renderInternal(component, options);
+}
+
+export interface RenderInternalOptions extends RenderOptions {
+  detectHostComponentNames?: boolean;
+}
+
+export function renderInternal<T>(
   component: React.ReactElement<T>,
   {
     wrapper: Wrapper,
     createNodeMock,
     unstable_validateStringsRenderedWithinText,
-  }: RenderOptions = {}
+    detectHostComponentNames = true,
+  }: RenderInternalOptions = {}
 ) {
-  configureHostComponentNamesIfNeeded();
+  if (detectHostComponentNames) {
+    configureHostComponentNamesIfNeeded();
+  }
 
   if (unstable_validateStringsRenderedWithinText) {
     return renderWithStringValidation(component, {

src/renderHook.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentType } from 'react';
-import render from './render';
+import { renderInternal } from './render';
 
 export type RenderHookResult<Result, Props> = {
   rerender: (props: Props) => void;
@@ -36,10 +36,13 @@ export function renderHook<Result, Props>(
     return null;
   }
 
-  const { rerender: baseRerender, unmount } = render(
+  const { rerender: baseRerender, unmount } = renderInternal(
     // @ts-expect-error since option can be undefined, initialProps can be undefined when it should'nt
     <TestComponent renderCallbackProps={initialProps} />,
-    { wrapper }
+    {
+      wrapper,
+      detectHostComponentNames: false,
+    }
   );
 
   function rerender(rerenderCallbackProps: Props) {