package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/react-native",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "description": "Simple and complete React Native testing utilities that encourage good testing practices.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/__tests__/config.test.ts

@@ -35,9 +35,13 @@ test('resetToDefaults() resets config to defaults', () => {
 
 test('resetToDefaults() resets internal config to defaults', () => {
   configureInternal({
-    hostComponentNames: { text: 'A', textInput: 'A' },
+    hostComponentNames: { text: 'A', textInput: 'A', switch: 'A' },
+  });
+  expect(getConfig().hostComponentNames).toEqual({
+    text: 'A',
+    textInput: 'A',
+    switch: 'A',
   });
-  expect(getConfig().hostComponentNames).toEqual({ text: 'A', textInput: 'A' });
 
   resetToDefaults();
   expect(getConfig().hostComponentNames).toBe(undefined);

src/__tests__/fireEvent-textInput.test.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { Text, TextInput, TextInputProps } from 'react-native';
+import { render, fireEvent } from '..';
+
+function WrappedTextInput(props: TextInputProps) {
+  return <TextInput {...props} />;
+}
+
+function DoubleWrappedTextInput(props: TextInputProps) {
+  return <WrappedTextInput {...props} />;
+}
+
+const layoutEvent = { nativeEvent: { layout: { width: 100, height: 100 } } };
+
+test('should fire only non-touch-related events on non-editable TextInput', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <TextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    />
+  );
+
+  const subject = view.getByTestId('subject');
+  fireEvent(subject, 'focus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});
+
+test('should fire only non-touch-related events on non-editable TextInput with nested Text', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <TextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    >
+      <Text>Nested Text</Text>
+    </TextInput>
+  );
+
+  const subject = view.getByText('Nested Text');
+  fireEvent(subject, 'focus');
+  fireEvent(subject, 'onFocus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'onSubmitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+  fireEvent(subject, 'onLayout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledTimes(2);
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});
+
+/**
+ * Historically there were problems with custom TextInput wrappers, as they
+ * could creat a hierarchy of three or more composite text input views with
+ * very similar event props.
+ *
+ * Typical hierarchy would be:
+ * - User composite TextInput
+ * - UI library composite TextInput
+ * - RN composite TextInput
+ * - RN host TextInput
+ *
+ * Previous implementation of fireEvent only checked `editable` prop for
+ * RN TextInputs, both host & composite but did not check on the UI library or
+ * user composite TextInput level, hence invoking the event handlers that
+ * should be blocked by `editable={false}` prop.
+ */
+test('should fire only non-touch-related events on non-editable wrapped TextInput', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <WrappedTextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    />
+  );
+
+  const subject = view.getByTestId('subject');
+  fireEvent(subject, 'focus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});
+
+/**
+ * Ditto testing for even deeper hierarchy of TextInput wrappers.
+ */
+test('should fire only non-touch-related events on non-editable double wrapped TextInput', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <DoubleWrappedTextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    />
+  );
+
+  const subject = view.getByTestId('subject');
+  fireEvent(subject, 'focus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});

src/__tests__/fireEvent.test.tsx

@@ -216,153 +216,113 @@ test('should not fire on disabled Pressable', () => {
   expect(handlePress).not.toHaveBeenCalled();
 });
 
-test('should not fire on non-editable TextInput', () => {
-  const testID = 'my-text-input';
-  const onChangeTextMock = jest.fn();
-  const NEW_TEXT = 'New text';
-
-  const { getByTestId } = render(
-    <TextInput
-      editable={false}
-      testID={testID}
-      onChangeText={onChangeTextMock}
-    />
-  );
-
-  fireEvent.changeText(getByTestId(testID), NEW_TEXT);
-  expect(onChangeTextMock).not.toHaveBeenCalled();
-});
-
-test('should not fire on non-editable TextInput with nested Text', () => {
-  const placeholder = 'Test placeholder';
-  const onChangeTextMock = jest.fn();
-  const NEW_TEXT = 'New text';
-
-  const { getByPlaceholderText } = render(
-    <View>
-      <TextInput
-        editable={false}
-        placeholder={placeholder}
-        onChangeText={onChangeTextMock}
-      >
-        <Text>Test text</Text>
-      </TextInput>
-    </View>
-  );
-
-  fireEvent.changeText(getByPlaceholderText(placeholder), NEW_TEXT);
-  expect(onChangeTextMock).not.toHaveBeenCalled();
-});
-
-test('should not fire on none pointerEvents View', () => {
-  const handlePress = jest.fn();
-
+test('should not fire inside View with pointerEvents="none"', () => {
+  const onPress = jest.fn();
   const screen = render(
     <View pointerEvents="none">
-      <Pressable onPress={handlePress}>
+      <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
     </View>
   );
 
   fireEvent.press(screen.getByText('Trigger'));
-  expect(handlePress).not.toHaveBeenCalled();
+  fireEvent(screen.getByText('Trigger'), 'onPress');
+  expect(onPress).not.toHaveBeenCalled();
 });
 
-test('should not fire on box-only pointerEvents View', () => {
-  const handlePress = jest.fn();
-
+test('should not fire inside View with pointerEvents="box-only"', () => {
+  const onPress = jest.fn();
   const screen = render(
     <View pointerEvents="box-only">
-      <Pressable onPress={handlePress}>
+      <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
     </View>
   );
 
   fireEvent.press(screen.getByText('Trigger'));
-  expect(handlePress).not.toHaveBeenCalled();
+  fireEvent(screen.getByText('Trigger'), 'onPress');
+  expect(onPress).not.toHaveBeenCalled();
 });
 
-test('should fire on box-none pointerEvents View', () => {
-  const handlePress = jest.fn();
-
+test('should fire inside View with pointerEvents="box-none"', () => {
+  const onPress = jest.fn();
   const screen = render(
     <View pointerEvents="box-none">
-      <Pressable onPress={handlePress}>
+      <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
     </View>
   );
 
   fireEvent.press(screen.getByText('Trigger'));
-  expect(handlePress).toHaveBeenCalled();
+  fireEvent(screen.getByText('Trigger'), 'onPress');
+  expect(onPress).toHaveBeenCalledTimes(2);
 });
 
-test('should fire on auto pointerEvents View', () => {
-  const handlePress = jest.fn();
-
+test('should fire inside View with pointerEvents="auto"', () => {
+  const onPress = jest.fn();
   const screen = render(
     <View pointerEvents="auto">
-      <Pressable onPress={handlePress}>
+      <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
     </View>
   );
 
   fireEvent.press(screen.getByText('Trigger'));
-  expect(handlePress).toHaveBeenCalled();
+  fireEvent(screen.getByText('Trigger'), 'onPress');
+  expect(onPress).toHaveBeenCalledTimes(2);
 });
 
-test('should not fire on box-only pointerEvents View with nested elements', () => {
-  const handlePress = jest.fn();
-
+test('should not fire deeply inside View with pointerEvents="box-only"', () => {
+  const onPress = jest.fn();
   const screen = render(
     <View pointerEvents="box-only">
       <View>
-        <Pressable onPress={handlePress}>
+        <Pressable onPress={onPress}>
           <Text>Trigger</Text>
         </Pressable>
       </View>
     </View>
   );
 
   fireEvent.press(screen.getByText('Trigger'));
-  expect(handlePress).not.toHaveBeenCalled();
+  fireEvent(screen.getByText('Trigger'), 'onPress');
+  expect(onPress).not.toHaveBeenCalled();
 });
 
-test('should fire non-pointer events on box-none pointerEvents View', () => {
-  const handleTouchStart = jest.fn();
-
+test('should fire non-pointer events inside View with pointerEvents="box-none"', () => {
+  const onTouchStart = jest.fn();
   const screen = render(
-    <View
-      pointerEvents="box-none"
-      onTouchStart={handleTouchStart}
-      testID="touch-start-view"
-    >
-      <Pressable onPress={() => {}}>
-        <Text>Trigger</Text>
-      </Pressable>
-    </View>
+    <View testID="view" pointerEvents="box-none" onTouchStart={onTouchStart} />
   );
 
-  fireEvent(screen.getByTestId('touch-start-view'), 'touchStart');
-  expect(handleTouchStart).toHaveBeenCalled();
+  fireEvent(screen.getByTestId('view'), 'touchStart');
+  expect(onTouchStart).toHaveBeenCalled();
 });
 
-test('should fire non-touch events on box-none pointerEvents View', () => {
-  const handleLayout = jest.fn();
+test('should fire non-touch events inside View with pointerEvents="box-none"', () => {
+  const onLayout = jest.fn();
+  const screen = render(
+    <View testID="view" pointerEvents="box-none" onLayout={onLayout} />
+  );
+
+  fireEvent(screen.getByTestId('view'), 'layout');
+  expect(onLayout).toHaveBeenCalled();
+});
 
+// This test if pointerEvents="box-only" on composite `Pressable` is blocking
+// the 'press' event on host View rendered by pressable.
+test('should fire on Pressable with pointerEvents="box-only', () => {
+  const onPress = jest.fn();
   const screen = render(
-    <View pointerEvents="box-none" onLayout={handleLayout} testID="layout-view">
-      <Pressable onPress={() => {}}>
-        <Text>Trigger</Text>
-      </Pressable>
-    </View>
+    <Pressable testID="pressable" pointerEvents="box-only" onPress={onPress} />
   );
 
-  fireEvent(screen.getByTestId('layout-view'), 'layout');
-  expect(handleLayout).toHaveBeenCalled();
+  fireEvent.press(screen.getByTestId('pressable'));
+  expect(onPress).toHaveBeenCalled();
 });
 
 test('should pass event up on disabled TouchableOpacity', () => {