feat: test-renderer 0.16

codemods/v14-update-deps/README.md

@@ -7,7 +7,7 @@ This codemod automatically updates your `package.json` to prepare for React Nati
 - Removes `@types/react-test-renderer` and `react-test-renderer` (no longer needed)
 - Moves `@testing-library/react-native` to `devDependencies` if it's in `dependencies`
 - Updates `@testing-library/react-native` to `^14.0.0-beta.0`
-- Adds `test-renderer@0.14.0` to `devDependencies`
+- Adds `test-renderer@0.16.0` to `devDependencies`
 
 ## Usage
 
@@ -38,7 +38,7 @@ npx codemod@latest run rntl-v14-update-deps --target ./path/to/your/project
 {
   "devDependencies": {
     "@testing-library/react-native": "^14.0.0-beta.0",
-    "test-renderer": "0.14.0"
+    "test-renderer": "0.16.0"
   }
 }
 ```

codemods/v14-update-deps/scripts/codemod.ts

@@ -4,7 +4,7 @@ import type { Transform } from 'codemod:ast-grep';
 import type JSONLang from 'codemod:ast-grep/langs/json';
 
 const RNTL_VERSION = '^14.0.0-beta.0';
-const TEST_RENDERER_VERSION = '0.14.0';
+const TEST_RENDERER_VERSION = '0.16.0';
 
 interface PackageJson {
   dependencies?: Record<string, string>;

codemods/v14-update-deps/tests/fixtures/already-alpha/expected.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "devDependencies": {
     "@testing-library/react-native": "^14.0.0-beta.0",
-    "test-renderer": "0.14.0"
+    "test-renderer": "0.16.0"
   }
 }

codemods/v14-update-deps/tests/fixtures/basic-update/expected.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "devDependencies": {
     "@testing-library/react-native": "^14.0.0-beta.0",
-    "test-renderer": "0.14.0"
+    "test-renderer": "0.16.0"
   }
 }

codemods/v14-update-deps/tests/fixtures/move-from-deps/expected.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "devDependencies": {
     "@testing-library/react-native": "^14.0.0-beta.0",
-    "test-renderer": "0.14.0"
+    "test-renderer": "0.16.0"
   }
 }

codemods/v14-update-deps/tests/fixtures/rntl-in-devdeps/expected.json

@@ -1,6 +1,6 @@
 {
   "devDependencies": {
     "@testing-library/react-native": "^14.0.0-beta.0",
-    "test-renderer": "0.14.0"
+    "test-renderer": "0.16.0"
   }
 }

codemods/v14-update-deps/tests/fixtures/with-peer-deps/expected.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "devDependencies": {
     "@testing-library/react-native": "^14.0.0-beta.0",
-    "test-renderer": "0.14.0"
+    "test-renderer": "0.16.0"
   }
 }

examples/basic/components/__tests__/AnimatedView.test.tsx

@@ -20,7 +20,7 @@ describe('AnimatedView', () => {
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });
 
-    await act(() => jest.advanceTimersByTime(250));
+    await act(() => jest.advanceTimersByTimeAsync(250));
     // Does not work with native driver
     // expect(screen.root).toHaveStyle({ opacity: 1 });
   });

examples/basic/package.json

@@ -29,7 +29,7 @@
     "eslint": "^10.2.0",
     "eslint-plugin-testing-library": "^7.16.2",
     "jest": "~29.7.0",
-    "test-renderer": "0.14.0",
+    "test-renderer": "0.16.0",
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.58.1"
   },

examples/basic/yarn.lock

@@ -5012,7 +5012,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.16.0, is-core-module@npm:^2.16.1":
+"is-core-module@npm:^2.16.0":
   version: 2.16.1
   resolution: "is-core-module@npm:2.16.1"
   dependencies:
@@ -7430,20 +7430,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.20.0":
-  version: 1.22.11
-  resolution: "resolve@npm:1.22.11"
-  dependencies:
-    is-core-module: "npm:^2.16.1"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10c0/f657191507530f2cbecb5815b1ee99b20741ea6ee02a59c57028e9ec4c2c8d7681afcc35febbd554ac0ded459db6f2d8153382c53a2f266cee2575e512674409
-  languageName: node
-  linkType: hard
-
-"resolve@npm:^1.22.10, resolve@npm:^1.22.2":
+"resolve@npm:^1.20.0, resolve@npm:^1.22.10, resolve@npm:^1.22.2":
   version: 1.22.10
   resolution: "resolve@npm:1.22.10"
   dependencies:
@@ -7465,20 +7452,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>":
-  version: 1.22.11
-  resolution: "resolve@patch:resolve@npm%3A1.22.11#optional!builtin<compat/resolve>::version=1.22.11&hash=c3c19d"
-  dependencies:
-    is-core-module: "npm:^2.16.1"
-    path-parse: "npm:^1.0.7"
-    supports-preserve-symlinks-flag: "npm:^1.0.0"
-  bin:
-    resolve: bin/resolve
-  checksum: 10c0/ee5b182f2e37cb1165465e58c6abc797fec0a80b5ba3231607beb4677db0c9291ac010c47cf092b6daa2b7f518d69a0e21888e7e2b633f68d501a874212a8c63
-  languageName: node
-  linkType: hard
-
-"resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>":
   version: 1.22.10
   resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
@@ -7546,7 +7520,7 @@ __metadata:
     react-native: "npm:0.81.5"
     react-native-safe-area-context: "npm:^5.6.2"
     react-native-web: "npm:^0.21.2"
-    test-renderer: "npm:0.14.0"
+    test-renderer: "npm:0.16.0"
     typescript: "npm:~5.9.2"
     typescript-eslint: "npm:^8.58.1"
   languageName: unknown
@@ -8137,15 +8111,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"test-renderer@npm:0.14.0":
-  version: 0.14.0
-  resolution: "test-renderer@npm:0.14.0"
+"test-renderer@npm:0.16.0":
+  version: 0.16.0
+  resolution: "test-renderer@npm:0.16.0"
   dependencies:
     "@types/react-reconciler": "npm:~0.31.0"
     react-reconciler: "npm:~0.31.0"
   peerDependencies:
     react: ^19.0.0
-  checksum: 10c0/d259f5d146f57bb6689cb828de73cd95a559bc3203f1a21824b027a6b43143447bbf60eed5d2f8ea18b806ee15002aa6ba1d023e01669fa9945ca8278391667d
+  checksum: 10c0/8175d6519f68285357b17a3dd40ea500877a9920483a2d7271583139d4b296175f672d57a98a9f6ad9417ce3cd464d557130214585c7c959ded3dde1cae1f48e
   languageName: node
   linkType: hard
 

examples/cookbook/package.json

@@ -41,7 +41,7 @@
     "eslint-plugin-testing-library": "^7.16.2",
     "jest": "~29.7.0",
     "msw": "2.7.0",
-    "test-renderer": "0.14.0",
+    "test-renderer": "0.16.0",
     "typescript": "~5.9.2",
     "typescript-eslint": "^8.58.1"
   },

examples/cookbook/yarn.lock

@@ -9064,7 +9064,7 @@ __metadata:
     react-native-screens: "npm:~4.16.0"
     react-native-web: "npm:^0.21.2"
     react-strict-dom: "npm:^0.0.55"
-    test-renderer: "npm:0.14.0"
+    test-renderer: "npm:0.16.0"
     typescript: "npm:~5.9.2"
     typescript-eslint: "npm:^8.58.1"
   languageName: unknown
@@ -9729,15 +9729,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"test-renderer@npm:0.14.0":
-  version: 0.14.0
-  resolution: "test-renderer@npm:0.14.0"
+"test-renderer@npm:0.16.0":
+  version: 0.16.0
+  resolution: "test-renderer@npm:0.16.0"
   dependencies:
     "@types/react-reconciler": "npm:~0.31.0"
     react-reconciler: "npm:~0.31.0"
   peerDependencies:
     react: ^19.0.0
-  checksum: 10c0/d259f5d146f57bb6689cb828de73cd95a559bc3203f1a21824b027a6b43143447bbf60eed5d2f8ea18b806ee15002aa6ba1d023e01669fa9945ca8278391667d
+  checksum: 10c0/8175d6519f68285357b17a3dd40ea500877a9920483a2d7271583139d4b296175f672d57a98a9f6ad9417ce3cd464d557130214585c7c959ded3dde1cae1f48e
   languageName: node
   linkType: hard
 

package.json

@@ -62,7 +62,7 @@
     "jest": ">=29.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.78",
-    "test-renderer": "^0.14.0"
+    "test-renderer": "^0.16.0"
   },
   "peerDependenciesMeta": {
     "jest": {
@@ -97,7 +97,7 @@
     "react-native": "0.85.0",
     "react-native-gesture-handler": "^2.31.1",
     "release-it": "^19.2.4",
-    "test-renderer": "0.14.0",
+    "test-renderer": "0.16.0",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.1"
   },

src/__tests__/render.test.tsx

@@ -33,11 +33,20 @@ test('does not warn when no options are passed', async () => {
   expect(_console.warn).not.toHaveBeenCalled();
 });
 
+test('supports null options', async () => {
+  const TestComponent = () => <Text testID="test">Test</Text>;
+
+  await render(<TestComponent />, null as any);
+
+  expect(screen.getByTestId('test')).toBeOnTheScreen();
+  expect(_console.warn).not.toHaveBeenCalled();
+});
+
 test('does not warn when only valid options are passed', async () => {
   const TestComponent = () => <Text testID="test">Test</Text>;
   const Wrapper = ({ children }: { children: React.ReactNode }) => <View>{children}</View>;
 
-  await render(<TestComponent />, { wrapper: Wrapper, createNodeMock: jest.fn() });
+  await render(<TestComponent />, { wrapper: Wrapper });
 
   expect(_console.warn).not.toHaveBeenCalled();
 });
@@ -66,16 +75,6 @@ describe('render options', () => {
     expect(screen.getByTestId('inner')).toBeOnTheScreen();
     expect(screen.getByText('Inner Content')).toBeOnTheScreen();
   });
-
-  test('createNodeMock option is passed to renderer', async () => {
-    const TestComponent = () => <View testID="test" />;
-    const mockNode = { testProperty: 'testValue' };
-    const createNodeMock = jest.fn(() => mockNode);
-
-    await render(<TestComponent />, { createNodeMock });
-
-    expect(screen.getByTestId('test')).toBeOnTheScreen();
-  });
 });
 
 describe('component rendering', () => {

src/__tests__/suspense-fake-timers.test.tsx

@@ -14,8 +14,6 @@ afterEach(() => {
 });
 
 function Suspending({ promise, testID }: { promise: Promise<unknown>; testID: string }) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore React 18 does not have `use` hook
   React.use(promise);
   return <View testID={testID} />;
 }

src/__tests__/suspense.test.tsx

@@ -12,8 +12,6 @@ afterEach(() => {
 });
 
 function Suspending({ promise, testID }: { promise: Promise<unknown>; testID: string }) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore React 18 does not have `use` hook
   React.use(promise);
   return <View testID={testID} />;
 }

src/helpers/__tests__/component-tree.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { render, screen } from '../..';
-import { getContainerElement, getHostSiblings } from '../component-tree';
+import { getContainerElement, getInstanceSiblings } from '../component-tree';
 
 function MultipleHostChildren() {
   return (
@@ -27,7 +27,7 @@ describe('getHostSiblings()', () => {
       </View>,
     );
 
-    const hostSiblings = getHostSiblings(screen.getByTestId('subject'));
+    const hostSiblings = getInstanceSiblings(screen.getByTestId('subject'));
     expect(hostSiblings).toEqual([
       screen.getByTestId('siblingBefore'),
       screen.getByTestId('siblingAfter'),

src/helpers/accessibility.ts

@@ -2,7 +2,7 @@ import type { AccessibilityRole, AccessibilityState, AccessibilityValue, Role }
 import { StyleSheet } from 'react-native';
 import type { HostElement } from 'test-renderer';
 
-import { getContainerElement, getHostSiblings, isHostElement } from './component-tree';
+import { getContainerElement, getInstanceSiblings, isTestInstance } from './component-tree';
 import { findAll } from './find-all';
 import { isHostImage, isHostSwitch, isHostText, isHostTextInput } from './host-component-names';
 import { getTextContent } from './text-content';
@@ -76,7 +76,7 @@ function isSubtreeInaccessible(element: HostElement): boolean {
 
   // iOS: accessibilityViewIsModal or aria-modal
   // See: https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios
-  const hostSiblings = getHostSiblings(element);
+  const hostSiblings = getInstanceSiblings(element);
   if (hostSiblings.some((sibling) => computeAriaModal(sibling))) {
     return true;
   }
@@ -155,7 +155,7 @@ export function computeAriaLabel(element: HostElement): string | undefined {
     const container = getContainerElement(element);
     const labelElement = findAll(
       container,
-      (node) => isHostElement(node) && node.props.nativeID === labelElementId,
+      (node) => isTestInstance(node) && node.props.nativeID === labelElementId,
       { includeHiddenElements: true },
     );
     if (labelElement.length > 0) {

src/helpers/component-tree.ts

@@ -1,43 +1,43 @@
-import type { HostElement, HostNode } from 'test-renderer';
+import type { TestInstance, TestNode } from 'test-renderer';
 
 import { screen } from '../screen';
 
 /**
  * Checks if the given element is a host element.
- * @param element The element to check.
+ * @param node The element to check.
  */
-export function isHostElement(element?: HostNode | null): element is HostElement {
-  return typeof element !== 'string' && typeof element?.type === 'string';
+export function isTestInstance(node?: TestNode | null): node is TestInstance {
+  return typeof node !== 'string' && typeof node?.type === 'string';
 }
 
-export function isElementMounted(element: HostElement) {
+export function isElementMounted(element: TestInstance) {
   return getContainerElement(element) === screen.container;
 }
 
 /**
  * Returns host siblings for given element.
- * @param element The element start traversing from.
+ * @param instance The element start traversing from.
  */
-export function getHostSiblings(element: HostElement): HostElement[] {
+export function getInstanceSiblings(instance: TestInstance): TestInstance[] {
   // Should not happen
-  const parent = element.parent;
+  const parent = instance.parent;
   if (!parent) {
     return [];
   }
 
   return parent.children.filter(
-    (sibling) => typeof sibling !== 'string' && sibling !== element,
-  ) as HostElement[];
+    (sibling) => typeof sibling !== 'string' && sibling !== instance,
+  ) as TestInstance[];
 }
 
 /**
- * Returns the containerelement of the tree.
+ * Returns the container element of the tree.
  *
- * @param element The element start traversing from.
+ * @param instance The element start traversing from.
  * @returns The container element of the tree.
  */
-export function getContainerElement(element: HostElement) {
-  let current = element;
+export function getContainerElement(instance: TestInstance) {
+  let current = instance;
   while (current.parent) {
     current = current.parent;
   }