feat: basic text input state

Author: mdjastrzebski

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;
@@ -443,4 +444,14 @@ describe('native events', () => {
     fireEvent(screen.getByTestId('test-id'), 'onMomentumScrollEnd');
     expect(onMomentumScrollEndSpy).toHaveBeenCalled();
   });
+
+  it('sets native state value for unmanaged text inputs', () => {
+    render(<TextInput testID="input" />);
+
+    const input = screen.getByTestId('input');
+    expect(input).toHaveDisplayValue('');
+
+    fireEvent.changeText(input, 'abc');
+    expect(input).toHaveDisplayValue('abc');
+  });
 });

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,10 @@ type EventName = StringWithAutocomplete<
 >;
 
 function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: unknown[]) {
+  if (eventName === 'changeText' && isHostTextInput(element) && typeof data[0] === 'string') {
+    nativeState?.elementValues.set(element, data[0]);
+  }
+
   const handler = findEventHandler(element, eventName);
   if (!handler) {
     return;

src/helpers/text-input.ts

@@ -1,4 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
+import { nativeState } from '../native-state';
 import { isHostTextInput } from './host-component-names';
 
 export function isTextInputEditable(element: ReactTestInstance) {
@@ -14,5 +15,10 @@ export function getTextInputValue(element: ReactTestInstance) {
     throw new Error(`Element is not a "TextInput", but it has type "${element.type}".`);
   }
 
-  return element.props.value ?? element.props.defaultValue;
+  return (
+    element.props.value ??
+    nativeState?.elementValues.get(element) ??
+    element.props.defaultValue ??
+    ''
+  );
 }

src/native-state.ts

@@ -0,0 +1,17 @@
+import { ReactTestInstance } from 'react-test-renderer';
+
+export type NativeState = {
+  elementValues: WeakMap<ReactTestInstance, string>;
+};
+
+export let nativeState: NativeState | null = null;
+
+export function initNativeState(): void {
+  nativeState = {
+    elementValues: new WeakMap(),
+  };
+}
+
+export function clearNativeState(): void {
+  nativeState = null;
+}

src/render.tsx

@@ -12,6 +12,7 @@ import { validateStringsRenderedWithinText } from './helpers/string-validation';
 import { renderWithAct } from './render-act';
 import { setRenderResult } from './screen';
 import { getQueriesForElement } from './within';
+import { initNativeState } from './native-state';
 
 export interface RenderOptions {
   wrapper?: React.ComponentType<any>;
@@ -127,6 +128,8 @@ function buildRenderResult(
   });
 
   setRenderResult(result);
+  initNativeState();
+
   return result;
 }
 

src/user-event/type/__tests__/type.test.tsx

@@ -3,6 +3,7 @@ import { TextInput, TextInputProps, View } from 'react-native';
 import { createEventLogger, getEventsNames, lastEventPayload } from '../../../test-utils';
 import { render, screen } from '../../..';
 import { userEvent } from '../..';
+import '../../../matchers/extend-expect';
 
 beforeEach(() => {
   jest.useRealTimers();
@@ -372,4 +373,15 @@ describe('type()', () => {
       },
     });
   });
+
+  it('supports value of unmanaged text inputs', async () => {
+    render(<TextInput testID="input" />);
+
+    const user = userEvent.setup();
+    const input = screen.getByTestId('input');
+    expect(input).toHaveDisplayValue('');
+
+    await user.type(input, 'abc');
+    expect(input).toHaveDisplayValue('abc');
+  });
 });

src/user-event/type/type.ts

@@ -1,5 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { isHostTextInput } from '../../helpers/host-component-names';
+import { nativeState } from '../../native-state';
 import { EventBuilder } from '../event-builder';
 import { ErrorWithStack } from '../../helpers/errors';
 import { isTextInputEditable } from '../../helpers/text-input';
@@ -96,6 +97,7 @@ export async function emitTypingEvents(
 
   dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
   dispatchEvent(element, 'changeText', text);
+  nativeState?.elementValues.set(element, text);
 
   const selectionRange = {
     start: text.length,