tweaks

Author: mdjastrzebski

src/__tests__/react-native-animated.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ViewStyle } from 'react-native';
-import { Animated } from 'react-native';
+import { Animated, Text } from 'react-native';
 
 import { act, render, screen } from '..';
 
@@ -46,7 +46,7 @@ describe('AnimatedView', () => {
   it('should use native driver when useNativeDriver is true', async () => {
     await render(
       <AnimatedView fadeInDuration={250} useNativeDriver={true}>
-        Test
+        <Text>Test</Text>
       </AnimatedView>,
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });
@@ -59,7 +59,7 @@ describe('AnimatedView', () => {
   it('should not use native driver when useNativeDriver is false', async () => {
     await render(
       <AnimatedView fadeInDuration={250} useNativeDriver={false}>
-        Test
+        <Text>Test</Text>
       </AnimatedView>,
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });

src/__tests__/render-hook.test.tsx

@@ -203,10 +203,10 @@ test('handles hook with suspense', async () => {
 });
 
 class ErrorBoundary extends React.Component<
-  { children: React.ReactNode; fallback: string },
+  { children: React.ReactNode; fallback: React.ReactNode },
   { hasError: boolean }
 > {
-  constructor(props: { children: React.ReactNode; fallback: string }) {
+  constructor(props: { children: React.ReactNode; fallback: React.ReactNode }) {
     super(props);
     this.state = { hasError: false };
   }
@@ -233,7 +233,7 @@ test('handles hook suspense with error boundary', async () => {
   const { result } = await renderHook(useSuspendingHook, {
     initialProps: promise,
     wrapper: ({ children }) => (
-      <ErrorBoundary fallback="error-fallback">
+      <ErrorBoundary fallback={<Text>Error Fallback</Text>}>
         <React.Suspense fallback={<Text>Loading...</Text>}>{children}</React.Suspense>
       </ErrorBoundary>
     ),

src/__tests__/timers.test.ts

@@ -1,4 +1,4 @@
-import waitFor from '../wait-for';
+import { waitFor } from '../wait-for';
 
 describe.each([false, true])('fake timers tests (legacyFakeTimers = %s)', (legacyFakeTimers) => {
   beforeEach(() => {

src/helpers/host-component-names.ts

@@ -1,6 +1,6 @@
 import type { HostElement } from 'universal-test-renderer';
 
-const HOST_TEXT_NAMES = ['Text', 'RCTText'];
+export const HOST_TEXT_NAMES = ['Text', 'RCTText'];
 const HOST_TEXT_INPUT_NAMES = ['TextInput'];
 const HOST_IMAGE_NAMES = ['Image'];
 const HOST_SWITCH_NAMES = ['RCTSwitch'];

src/matchers/__tests__/to-have-text-content.test.tsx

@@ -6,7 +6,9 @@ import { render, screen } from '../..';
 test('toHaveTextContent() example test', async () => {
   await render(
     <View testID="view">
-      <Text>Hello</Text> <Text>World</Text>
+      <Text>Hello</Text>
+      <Text> </Text>
+      <Text>World</Text>
     </View>,
   );
 

src/pure.ts

@@ -1,10 +1,10 @@
 export { default as act } from './act';
 export { cleanup } from './cleanup';
 export { fireEvent, unsafe_fireEventSync } from './fire-event';
-export { default as render } from './render';
-export { default as unsafe_renderSync } from './deprecated/render-sync';
-export { default as waitFor } from './wait-for';
-export { default as waitForElementToBeRemoved } from './wait-for-element-to-be-removed';
+export { render } from './render';
+export { unsafe_renderSync } from './unsafe-render-sync';
+export { waitFor } from './wait-for';
+export { waitForElementToBeRemoved } from './wait-for-element-to-be-removed';
 export { within, getQueriesForElement } from './within';
 
 export { configure, resetToDefaults } from './config';
@@ -14,7 +14,7 @@ export { renderHook, unsafe_renderHookSync } from './render-hook';
 export { screen } from './screen';
 export { userEvent } from './user-event';
 
-export type { RenderSyncOptions, RenderSyncResult, DebugFunction } from './deprecated/render-sync';
+export type { RenderSyncOptions, RenderSyncResult, DebugFunction } from './unsafe-render-sync';
 export type { RenderOptions, RenderResult, RenderResult as RenderAPI } from './render';
 export type { RenderHookOptions, RenderHookResult, RenderHookSyncResult } from './render-hook';
 export type { Config } from './config';

src/queries/make-queries.ts

@@ -5,7 +5,7 @@ import { formatJson } from '../helpers/format-element';
 import { logger } from '../helpers/logger';
 import { screen } from '../screen';
 import type { WaitForOptions } from '../wait-for';
-import waitFor from '../wait-for';
+import { waitFor } from '../wait-for';
 
 export type GetByQuery<Predicate, Options = void> = (
   predicate: Predicate,

src/render-hook.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import unsafe_renderSync from './deprecated/render-sync';
-import render from './render';
+import { render } from './render';
 import type { RefObject } from './types';
+import { unsafe_renderSync } from './unsafe-render-sync';
 
 export type RenderHookResult<Result, Props> = {
   result: RefObject<Result>;

src/render.tsx

@@ -6,6 +6,7 @@ import { addToCleanupQueue } from './cleanup';
 import { getConfig } from './config';
 import type { DebugOptions } from './helpers/debug';
 import { debug } from './helpers/debug';
+import { HOST_TEXT_NAMES } from './helpers/host-component-names';
 import { renderWithAsyncAct } from './render-act';
 import { setRenderResult } from './screen';
 import { getQueriesForElement } from './within';
@@ -18,7 +19,7 @@ export interface RenderOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   wrapper?: React.ComponentType<any>;
 
-  createNodeMock?: (element: React.ReactElement) => unknown;
+  createNodeMock?: (element: React.ReactElement) => object;
 }
 
 export type RenderResult = Awaited<ReturnType<typeof render>>;
@@ -27,14 +28,13 @@ export type RenderResult = Awaited<ReturnType<typeof render>>;
  * Renders test component deeply using React Test Renderer and exposes helpers
  * to assert on the output.
  */
-export default async function render<T>(
-  component: React.ReactElement<T>,
-  options: RenderOptions = {},
-) {
-  const { wrapper: Wrapper } = options || {};
+export async function render<T>(component: React.ReactElement<T>, options: RenderOptions = {}) {
+  const { wrapper: Wrapper, createNodeMock } = options || {};
 
-  // TODO allow passing some options
-  const rendererOptions: RootOptions = {};
+  const rendererOptions: RootOptions = {
+    textComponents: HOST_TEXT_NAMES,
+    createNodeMock,
+  };
 
   const wrap = (element: React.ReactElement) => (Wrapper ? <Wrapper>{element}</Wrapper> : element);
   const renderer = await renderWithAsyncAct(wrap(component), rendererOptions);

src/deprecated/render-sync.tsx src/unsafe-render-sync.tsxsrc/deprecated/render-sync.tsx renamed to src/unsafe-render-sync.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import type { HostElement, JsonElement, Root, RootOptions } from 'universal-test-renderer';
 
-import act from '../act';
-import { addToCleanupQueue } from '../cleanup';
-import { getConfig } from '../config';
-import type { DebugOptions } from '../helpers/debug';
-import { debug } from '../helpers/debug';
-import { renderWithAct } from '../render-act';
-import { setRenderResult } from '../screen';
-import { getQueriesForElement } from '../within';
+import act from './act';
+import { addToCleanupQueue } from './cleanup';
+import { getConfig } from './config';
+import type { DebugOptions } from './helpers/debug';
+import { debug } from './helpers/debug';
+import { HOST_TEXT_NAMES } from './helpers/host-component-names';
+import { renderWithAct } from './render-act';
+import { setRenderResult } from './screen';
+import { getQueriesForElement } from './within';
 
 export interface RenderSyncOptions {
   /**
@@ -18,15 +19,15 @@ export interface RenderSyncOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   wrapper?: React.ComponentType<any>;
 
-  createNodeMock?: (element: React.ReactElement) => unknown;
+  createNodeMock?: (element: React.ReactElement) => object;
 }
 
 /**
  * @deprecated Use `render` (async) instead. This function is provided for migration purposes only.
  * Renders test component deeply using React Test Renderer and exposes helpers
  * to assert on the output.
  */
-export default function unsafe_renderSync<T>(
+export function unsafe_renderSync<T>(
   component: React.ReactElement<T>,
   options: RenderSyncOptions = {},
 ) {
@@ -36,10 +37,12 @@ export default function unsafe_renderSync<T>(
 export type RenderSyncResult = ReturnType<typeof unsafe_renderSync>;
 
 export function renderInternal<T>(component: React.ReactElement<T>, options?: RenderSyncOptions) {
-  const { wrapper: Wrapper } = options || {};
+  const { wrapper: Wrapper, createNodeMock } = options || {};
 
-  // TODO allow passing some options
-  const rendererOptions: RootOptions = {};
+  const rendererOptions: RootOptions = {
+    textComponents: HOST_TEXT_NAMES,
+    createNodeMock,
+  };
 
   const wrap = (element: React.ReactElement) => (Wrapper ? <Wrapper>{element}</Wrapper> : element);
   const renderer = renderWithAct(wrap(component), rendererOptions);