feat: pass first tests

Author: mdjastrzebski

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

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import TestRenderer from 'react-test-renderer';
-import { configureInternal, getConfig } from '../config';
+import { configure, configureInternal, getConfig } from '../config';
 import {
   getHostComponentNames,
   configureHostComponentNamesIfNeeded,
 } from '../helpers/host-component-names';
 import { act, render } from '..';
+import * as internalRenderer from '../renderer/renderer';
+
+beforeEach(() => {
+  configure({ renderer: 'internal' });
+});
 
 describe('getHostComponentNames', () => {
   test('returns host component names from internal config', () => {
@@ -102,12 +107,22 @@ describe('configureHostComponentNamesIfNeeded', () => {
   });
 
   test('throw an error when auto-detection fails', () => {
-    const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
-    const renderer = TestRenderer.create(<View />);
-
-    mockCreate.mockReturnValue({
-      root: renderer.root,
-    });
+    let mockRender: jest.SpyInstance;
+    if (getConfig().renderer === 'internal') {
+      const result = internalRenderer.render(<View />);
+
+      mockRender = jest.spyOn(internalRenderer, 'render') as jest.Mock;
+      mockRender.mockReturnValue({
+        root: result.root,
+      });
+    } else {
+      const renderer = TestRenderer.create(<View />);
+
+      mockRender = jest.spyOn(TestRenderer, 'create') as jest.Mock;
+      mockRender.mockReturnValue({
+        root: renderer.root,
+      });
+    }
 
     expect(() => configureHostComponentNamesIfNeeded()).toThrowErrorMatchingInlineSnapshot(`
       "Trying to detect host component names triggered the following error:
@@ -118,6 +133,6 @@ describe('configureHostComponentNamesIfNeeded', () => {
       Please check if you are using compatible versions of React Native and React Native Testing Library."
     `);
 
-    mockCreate.mockReset();
+    mockRender.mockReset();
   });
 });

src/config.ts

@@ -1,4 +1,5 @@
-import { DebugOptions } from './helpers/debug-deep';
+import type { DebugOptions } from './helpers/debug-deep';
+import type { Renderer } from './render';
 
 /**
  * Global configuration options for React Native Testing Library.
@@ -13,6 +14,9 @@ export type Config = {
 
   /** Default options for `debug` helper. */
   defaultDebugOptions?: Partial<DebugOptions>;
+
+  /** Renderer to use for rendering components. */
+  renderer?: Renderer;
 };
 
 export type ConfigAliasOptions = {

src/render-act.ts

@@ -1,17 +1,27 @@
 import TestRenderer from 'react-test-renderer';
-import type { ReactTestRenderer, TestRendererOptions } from 'react-test-renderer';
+import type { ReactTestRenderer } from 'react-test-renderer';
 import act from './act';
+import { render } from './renderer/renderer';
+import { RenderOptions } from './render';
+import { getConfig } from './config';
 
 export function renderWithAct(
   component: React.ReactElement,
-  options?: Partial<TestRendererOptions>,
+  options?: RenderOptions,
 ): ReactTestRenderer {
   let renderer: ReactTestRenderer;
 
+  const rendererOption = options?.renderer ?? getConfig().renderer;
+
   // This will be called synchronously.
   void act(() => {
-    // @ts-expect-error TestRenderer.create is not typed correctly
-    renderer = TestRenderer.create(component, options);
+    if (rendererOption == 'internal') {
+      console.log(`💠 Test "${expect.getState().currentTestName}": using internal renderer`);
+      renderer = render(component) as ReactTestRenderer;
+    } else {
+      // @ts-expect-error TestRenderer.create is not typed correctly
+      renderer = TestRenderer.create(component, options);
+    }
   });
 
   // @ts-ignore act is synchronous, so renderer is already initialized here

src/render.tsx

@@ -13,10 +13,12 @@ import { renderWithAct } from './render-act';
 import { setRenderResult } from './screen';
 import { getQueriesForElement } from './within';
 
+export type Renderer = 'react-test-renderer' | 'internal';
 export interface RenderOptions {
   wrapper?: React.ComponentType<any>;
   createNodeMock?: (element: React.ReactElement) => unknown;
   unstable_validateStringsRenderedWithinText?: boolean;
+  renderer?: Renderer;
 }
 
 export type RenderResult = ReturnType<typeof render>;
@@ -41,7 +43,7 @@ export function renderInternal<T>(
     wrapper: Wrapper,
     detectHostComponentNames = true,
     unstable_validateStringsRenderedWithinText,
-    ...testRendererOptions
+    ...restOptions
   } = options || {};
 
   if (detectHostComponentNames) {
@@ -51,12 +53,12 @@ export function renderInternal<T>(
   if (unstable_validateStringsRenderedWithinText) {
     return renderWithStringValidation(component, {
       wrapper: Wrapper,
-      ...testRendererOptions,
+      ...restOptions,
     });
   }
 
   const wrap = (element: React.ReactElement) => (Wrapper ? <Wrapper>{element}</Wrapper> : element);
-  const renderer = renderWithAct(wrap(component), testRendererOptions);
+  const renderer = renderWithAct(wrap(component), restOptions);
   return buildRenderResult(renderer, wrap);
 }
 

src/renderer/host-element.ts

@@ -3,6 +3,10 @@ import { Container, Instance, TextInstance } from './reconciler';
 export type HostNode = HostElement | string;
 export type HostElementProps = Record<string, unknown>;
 
+type FindOptions = {
+  deep?: boolean;
+};
+
 const instanceToHostElementMap = new WeakMap<Container | Instance, HostElement>();
 
 export class HostElement {
@@ -58,4 +62,34 @@ export class HostElement {
         throw new Error(`Unexpected node type in toJSON: ${instance.tag}`);
     }
   }
+
+  findAll(predicate: (element: HostElement) => boolean, options?: FindOptions): HostElement[] {
+    return findAll(this, predicate, options);
+  }
+}
+
+function findAll(
+  root: HostElement,
+  predicate: (element: HostElement) => boolean,
+  options?: FindOptions,
+): HostElement[] {
+  const deep = options?.deep ?? true;
+  const results = [];
+
+  if (predicate(root)) {
+    results.push(root);
+    if (!deep) {
+      return results;
+    }
+  }
+
+  root.children.forEach((child) => {
+    if (typeof child === 'string') {
+      return;
+    }
+
+    results.push(...findAll(child, predicate, options));
+  });
+
+  return results;
 }

src/renderer/reconciler.ts

@@ -101,10 +101,10 @@ const hostConfig = {
     _hostContext: HostContext,
     internalHandle: OpaqueHandle,
   ): Instance {
-    console.log('createInstance', type, props);
-    console.log('- RootContainer:', rootContainer);
-    console.log('- HostContext:', _hostContext);
-    console.log('- InternalHandle:', internalHandle);
+    // console.log('createInstance', type, props);
+    // console.log('- RootContainer:', rootContainer);
+    // console.log('- HostContext:', _hostContext);
+    // console.log('- InternalHandle:', internalHandle);
     return {
       tag: 'INSTANCE',
       type,

src/renderer/renderer.ts

@@ -33,7 +33,7 @@ export function render(element: ReactElement): RenderResult {
 
   TestReconciler.updateContainer(element, rootFiber, null, () => {
     // eslint-disable-next-line no-console
-    console.log('Rendered', container?.children);
+    //console.log('Rendered', container?.children);
   });
 
   //     update(newElement: React$Element<any>) {
@@ -50,7 +50,7 @@ export function render(element: ReactElement): RenderResult {
 
     TestReconciler.updateContainer(element, rootFiber, null, () => {
       // eslint-disable-next-line no-console
-      console.log('Updated', container?.children);
+      //console.log('Updated', container?.children);
     });
   };
 
@@ -61,7 +61,7 @@ export function render(element: ReactElement): RenderResult {
 
     TestReconciler.updateContainer(null, rootFiber, null, () => {
       // eslint-disable-next-line no-console
-      console.log('Unmounted', container?.children);
+      //console.log('Unmounted', container?.children);
     });
 
     container = null;