.github/workflows/example-apps.yml

@@ -6,7 +6,7 @@ jobs:
   test-example:
     strategy:
       matrix:
-        node: [14, 16, 18]
+        node: [18, 20]
         example: [basic, redux, react-navigation]
     name: Test Example
     runs-on: ubuntu-latest

.github/workflows/main.yml

@@ -61,34 +61,20 @@ jobs:
   test:
     needs: [install-cache-deps]
     runs-on: ubuntu-latest
-    name: Test React 18
+    name: Test
     steps:
       - name: Checkout
         uses: actions/checkout@v3
 
       - name: Setup Node.js and deps
         uses: ./.github/actions/setup-deps
 
-      - name: Test React 18
+      - name: Test
         run: yarn test:ci
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3
 
-  test-react-17:
-    needs: [install-cache-deps]
-    runs-on: ubuntu-latest
-    name: Test React 17
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js and deps
-        uses: ./.github/actions/setup-deps
-
-      - name: Test React 17
-        run: yarn test:ci:react:17
-
   test-website:
     runs-on: ubuntu-latest
     name: Test Website

examples/basic/package.json

@@ -14,17 +14,17 @@
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.3",
+    "react-native": "0.72.4",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.2.1",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.3.0",
     "@types/react": "~18.2.14",
-    "jest": "^29.3.0",
+    "jest": "^29.7.0",
     "react-test-renderer": "18.2.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.2.2"
   },
   "private": true
 }

experiments-app/src/experiments.ts

@@ -1,3 +1,4 @@
+import { AccessibilityScreen } from './screens/Accessibility';
 import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
 import { TextInputEvents } from './screens/TextInputEvents';
 import { ScrollViewEvents } from './screens/ScrollViewEvents';
@@ -7,6 +8,11 @@ import { SectionListEvents } from './screens/SectionListEvents';
 export type Experiment = (typeof experiments)[number];
 
 export const experiments = [
+  {
+    key: 'Accessibility',
+    title: 'Accessibility',
+    component: AccessibilityScreen,
+  },
   {
     key: 'TextInputEvents',
     title: 'TextInput Events',

experiments-app/src/screens/Accessibility.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { StyleSheet, View, Text, ScrollView, TextInput } from 'react-native';
+
+export function AccessibilityScreen() {
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.view}>
+        <Text accessible={false}>{'<View />'}</Text>
+      </View>
+      <View accessible style={styles.view}>
+        <Text accessible={false}>{'<View accessible />'}</Text>
+      </View>
+      <View role="button" style={styles.view}>
+        <Text accessible={false}>{'<View role="button" />'}</Text>
+      </View>
+      <View accessible role="button" style={styles.view}>
+        <Text accessible={false}>{'<View accessible role="button" />'}</Text>
+      </View>
+      <View accessible role="slider" style={styles.view}>
+        <Text accessible={false}>{'<View accessible role="slider" />'}</Text>
+      </View>
+      <View accessible role="none" style={styles.view}>
+        <Text accessible={false}>{'<View accessible role="none" />'}</Text>
+      </View>
+
+      <Text style={styles.text}>{'<Text />'}</Text>
+      <Text accessible={false} style={styles.text}>
+        {'<Text accessible={false} />'}
+      </Text>
+      <Text role="none" style={styles.text}>
+        {'<Text role="none" />'}
+      </Text>
+
+      <TextInput style={styles.textInput} value="<TextInput />" />
+      <TextInput
+        editable={false}
+        style={styles.textInput}
+        value="<TextInput editable={false} />"
+      />
+      <TextInput
+        accessibilityRole="search"
+        style={styles.textInput}
+        value="<TextInput accessibilityRole='search' />"
+      />
+      <TextInput
+        role="searchbox"
+        style={styles.textInput}
+        value="<TextInput role='search' />"
+      />
+      <TextInput
+        role="none"
+        style={styles.textInput}
+        value="<TextInput role='none' />"
+      />
+      <TextInput
+        accessible={false}
+        style={styles.textInput}
+        value="<TextInput accessible={false} />"
+      />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  view: {
+    padding: 20,
+    backgroundColor: 'grey',
+  },
+  text: {
+    padding: 20,
+    backgroundColor: '#b1f2ff',
+  },
+  textInput: {
+    padding: 20,
+    backgroundColor: '#fbebd8',
+  },
+});

experiments-rtl/src/app/__tests__/click.test.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-test("userEvent.click()", async () => {
+test('userEvent.click()', async () => {
   const handleClick = jest.fn();
 
   render(
@@ -11,12 +11,12 @@ test("userEvent.click()", async () => {
     </button>
   );
 
-  const button = screen.getByText("Click");
+  const button = screen.getByText('Click');
   await userEvent.click(button);
   expect(handleClick).toHaveBeenCalledTimes(1);
 });
 
-test("fireEvent.click()", () => {
+test('fireEvent.click()', () => {
   const handleClick = jest.fn();
 
   render(
@@ -25,7 +25,7 @@ test("fireEvent.click()", () => {
     </button>
   );
 
-  const button = screen.getByText("Click");
+  const button = screen.getByText('Click');
   fireEvent.click(button);
   expect(handleClick).toHaveBeenCalledTimes(1);
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/react-native",
-  "version": "12.3.0",
+  "version": "12.3.1",
   "description": "Simple and complete React Native testing utilities that encourage good testing practices.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -32,34 +32,35 @@
     "dont-cleanup-after-each.js"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
-    "@babel/plugin-transform-flow-strip-types": "^7.19.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-flow": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/cli": "^7.22.15",
+    "@babel/core": "^7.22.20",
+    "@babel/plugin-transform-flow-strip-types": "^7.22.5",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-flow": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
     "@callstack/eslint-config": "^13.0.1",
     "@relmify/jest-serializer-strip-ansi": "^1.0.2",
-    "@types/jest": "^29.2.3",
-    "@types/react": "^18.2.15",
-    "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.4.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.21",
+    "@types/react-test-renderer": "^18.0.2",
+    "babel-jest": "^29.7.0",
     "dedent": "^1.1.0",
     "del-cli": "^5.0.0",
     "eslint": "^8.21.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "flow-bin": "~0.170.0",
     "flow-copy-source": "^2.0.9",
-    "jest": "^29.4.0",
+    "jest": "^29.7.0",
     "react": "18.2.0",
-    "react-native": "0.71.4",
+    "react-native": "0.72.4",
     "react-test-renderer": "18.2.0",
-    "strip-ansi": "^6.0.0",
-    "typescript": "^5.0.2"
+    "strip-ansi": "^6.0.1",
+    "typescript": "^5.2.2"
   },
   "dependencies": {
-    "jest-matcher-utils": "^29.6.2",
-    "pretty-format": "^29.6.2",
+    "jest-matcher-utils": "^29.7.0",
+    "pretty-format": "^29.7.0",
     "redent": "^3.0.0"
   },
   "peerDependencies": {
@@ -77,11 +78,12 @@
     "clean": "del build",
     "test": "jest",
     "test:ci": "jest --maxWorkers=2 --collectCoverage=true --coverage-provider=v8",
-    "test:ci:react:17": "scripts/test_react_17",
+    "test:react-17": "scripts/test_react_17",
     "typecheck": "tsc",
     "flow": "flow",
     "copy-flowtypes": "cp typings/index.flow.js build",
     "lint": "eslint src --cache",
+    "validate": "yarn lint && yarn typecheck && yarn test",
     "prepublish": "yarn build",
     "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
     "build:js:watch": "yarn build:js --watch",

src/__tests__/config.test.ts

@@ -35,12 +35,19 @@ test('resetToDefaults() resets config to defaults', () => {
 
 test('resetToDefaults() resets internal config to defaults', () => {
   configureInternal({
-    hostComponentNames: { text: 'A', textInput: 'A', switch: 'A', modal: 'A' },
+    hostComponentNames: {
+      text: 'A',
+      textInput: 'A',
+      switch: 'A',
+      scrollView: 'A',
+      modal: 'A',
+    },
   });
   expect(getConfig().hostComponentNames).toEqual({
     text: 'A',
     textInput: 'A',
     switch: 'A',
+    scrollView: 'A',
     modal: 'A',
   });
 

src/__tests__/host-component-names.test.tsx

@@ -8,19 +8,14 @@ import {
 } from '../helpers/host-component-names';
 import { act, render } from '..';
 
-const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
-
-beforeEach(() => {
-  mockCreate.mockReset();
-});
-
 describe('getHostComponentNames', () => {
   test('returns host component names from internal config', () => {
     configureInternal({
       hostComponentNames: {
         text: 'banana',
         textInput: 'banana',
         switch: 'banana',
+        scrollView: 'banana',
         modal: 'banana',
       },
     });
@@ -29,6 +24,7 @@ describe('getHostComponentNames', () => {
       text: 'banana',
       textInput: 'banana',
       switch: 'banana',
+      scrollView: 'banana',
       modal: 'banana',
     });
   });
@@ -42,6 +38,7 @@ describe('getHostComponentNames', () => {
       text: 'Text',
       textInput: 'TextInput',
       switch: 'RCTSwitch',
+      scrollView: 'RCTScrollView',
       modal: 'Modal',
     });
     expect(getConfig().hostComponentNames).toBe(hostComponentNames);
@@ -71,6 +68,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
       text: 'Text',
       textInput: 'TextInput',
       switch: 'RCTSwitch',
+      scrollView: 'RCTScrollView',
       modal: 'Modal',
     });
   });
@@ -81,6 +79,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
         text: 'banana',
         textInput: 'banana',
         switch: 'banana',
+        scrollView: 'banana',
         modal: 'banana',
       },
     });
@@ -91,11 +90,13 @@ describe('configureHostComponentNamesIfNeeded', () => {
       text: 'banana',
       textInput: 'banana',
       switch: 'banana',
+      scrollView: 'banana',
       modal: 'banana',
     });
   });
 
   test('throw an error when autodetection fails', () => {
+    const mockCreate = jest.spyOn(TestRenderer, 'create') as jest.Mock;
     const renderer = TestRenderer.create(<View />);
 
     mockCreate.mockReturnValue({
@@ -111,5 +112,7 @@ describe('configureHostComponentNamesIfNeeded', () => {
       There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
       Please check if you are using compatible versions of React Native and React Native Testing Library."
     `);
+
+    mockCreate.mockReset();
   });
 });

src/config.ts

@@ -24,6 +24,7 @@ export type HostComponentNames = {
   text: string;
   textInput: string;
   switch: string;
+  scrollView: string;
   modal: string;
 };