Merge branch 'callstack:main' into docs/cookbook/net-reqs

Author: vanGalilea

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["Pressable", "RNTL", "Uncapitalize"]
+  "cSpell.words": ["labelledby", "Pressable", "RNTL", "Uncapitalize", "valuenow", "valuetext"]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/react-native",
-  "version": "12.6.0",
+  "version": "12.6.1",
   "description": "Simple and complete React Native testing utilities that encourage good testing practices.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -70,7 +70,7 @@
     "@babel/preset-flow": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@callstack/eslint-config": "^14.2.0",
+    "@callstack/eslint-config": "^15.0.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@relmify/jest-serializer-strip-ansi": "^1.0.2",
     "@types/jest": "^29.5.12",

src/__tests__/fire-event.test.tsx

@@ -9,6 +9,7 @@ import {
   View,
 } from 'react-native';
 import { fireEvent, render, screen } from '..';
+import '../matchers/extend-expect';
 
 type OnPressComponentProps = {
   onPress: () => void;
@@ -139,17 +140,26 @@ test('fireEvent.scroll', () => {
 
 test('fireEvent.changeText', () => {
   const onChangeTextMock = jest.fn();
-  const CHANGE_TEXT = 'content';
 
   render(
     <View>
       <TextInput placeholder="Customer placeholder" onChangeText={onChangeTextMock} />
     </View>,
   );
 
-  fireEvent.changeText(screen.getByPlaceholderText('Customer placeholder'), CHANGE_TEXT);
+  const input = screen.getByPlaceholderText('Customer placeholder');
+  fireEvent.changeText(input, 'content');
+  expect(onChangeTextMock).toHaveBeenCalledWith('content');
+});
+
+it('sets native state value for unmanaged text inputs', () => {
+  render(<TextInput testID="input" />);
+
+  const input = screen.getByTestId('input');
+  expect(input).toHaveDisplayValue('');
 
-  expect(onChangeTextMock).toHaveBeenCalledWith(CHANGE_TEXT);
+  fireEvent.changeText(input, 'abc');
+  expect(input).toHaveDisplayValue('abc');
 });
 
 test('custom component with custom event name', () => {

src/__tests__/render-hook.test.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import TestRenderer from 'react-test-renderer';
 import { renderHook } from '../pure';
 
-test('gives comitted result', () => {
+test('gives committed result', () => {
   const { result } = renderHook(() => {
     const [state, setState] = React.useState(1);
 
@@ -22,13 +22,11 @@ test('allows rerendering', () => {
       const [left, setLeft] = React.useState('left');
       const [right, setRight] = React.useState('right');
 
-      // eslint-disable-next-line jest/no-if
       switch (props.branch) {
         case 'left':
           return [left, setLeft];
         case 'right':
           return [right, setRight];
-
         default:
           throw new Error('No Props passed. This is a bug in the implementation');
       }
@@ -64,7 +62,7 @@ const useMyHook = (param: number | undefined) => {
   return param;
 };
 
-test('props type is infered correctly when initial props is defined', () => {
+test('props type is inferred correctly when initial props is defined', () => {
   const { result, rerender } = renderHook((num: number | undefined) => useMyHook(num), {
     initialProps: 5,
   });

src/__tests__/wait-for-element-to-be-removed.test.tsx

@@ -114,7 +114,7 @@ test('waits with custom interval', async () => {
       timeout: 600,
       interval: 200,
     });
-  } catch (e) {
+  } catch {
     // Suppress expected error
   }
 
@@ -133,7 +133,7 @@ test.each([false, true])(
         timeout: 400,
         interval: 200,
       });
-    } catch (e) {
+    } catch {
       // Suppress expected error
     }
 

src/__tests__/wait-for.test.tsx

@@ -91,7 +91,7 @@ test('waits for element with custom interval', async () => {
 
   try {
     await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
-  } catch (e) {
+  } catch {
     // suppress
   }
 
@@ -160,7 +160,7 @@ test.each([false, true])(
 
     try {
       await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
-    } catch (error) {
+    } catch {
       // suppress
     }
 
@@ -185,7 +185,7 @@ test.each([false, true])(
         interval: 200,
         onTimeout: mockHandleFn,
       });
-    } catch (error) {
+    } catch {
       // suppress
     }
 
@@ -248,7 +248,7 @@ test.each([false, true])(
 
     try {
       await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
-    } catch (error) {
+    } catch {
       // suppress
     }
 

src/cleanup.ts

@@ -1,11 +1,14 @@
-import * as React from 'react';
+import { clearNativeState } from './native-state';
 import { clearRenderResult } from './screen';
 
-type CleanUpFunction = (nextElement?: React.ReactElement<any>) => void;
-let cleanupQueue = new Set<CleanUpFunction>();
+type CleanUpFunction = () => void;
+
+const cleanupQueue = new Set<CleanUpFunction>();
 
 export default function cleanup() {
+  clearNativeState();
   clearRenderResult();
+
   cleanupQueue.forEach((fn) => fn());
   cleanupQueue.clear();
 }

src/fire-event.ts

@@ -12,6 +12,7 @@ import { isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isTextInputEditable } from './helpers/text-input';
 import { StringWithAutocomplete } from './types';
+import { nativeState } from './native-state';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
@@ -120,6 +121,8 @@ type EventName = StringWithAutocomplete<
 >;
 
 function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: unknown[]) {
+  setNativeStateIfNeeded(element, eventName, data[0]);
+
   const handler = findEventHandler(element, eventName);
   if (!handler) {
     return;
@@ -143,3 +146,14 @@ fireEvent.scroll = (element: ReactTestInstance, ...data: unknown[]) =>
   fireEvent(element, 'scroll', ...data);
 
 export default fireEvent;
+
+function setNativeStateIfNeeded(element: ReactTestInstance, eventName: string, value: unknown) {
+  if (
+    eventName === 'changeText' &&
+    typeof value === 'string' &&
+    isHostTextInput(element) &&
+    isTextInputEditable(element)
+  ) {
+    nativeState?.valueForElement.set(element, value);
+  }
+}