improve example apps

Author: mdjastrzebski

examples/basic/__tests__/App.test.tsx

@@ -13,7 +13,7 @@ test('renders correctly', async () => {
 
   // Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeOnTheScreen()`
   // to clarify our intent.
-  expect(screen.getByRole('header', { name: 'Sign in to Example App' })).toBeOnTheScreen();
+  expect(screen.getByRole('heading', { name: 'Sign in to Example App' })).toBeOnTheScreen();
 });
 
 /**
@@ -30,7 +30,7 @@ test('User can sign in successully with correct credentials', async () => {
 
   // Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeOnTheScreen()`
   // to clarify our intent.
-  expect(screen.getByRole('header', { name: 'Sign in to Example App' })).toBeOnTheScreen();
+  expect(screen.getByRole('heading', { name: 'Sign in to Example App' })).toBeOnTheScreen();
 
   // Hint: we can use `getByLabelText` to find our text inputs using their labels.
   await user.type(screen.getByLabelText('Username'), 'admin');
@@ -43,10 +43,10 @@ test('User can sign in successully with correct credentials', async () => {
   // for the action to complete.
   // Hint: subsequent queries do not need to use `findBy*`, because they are used after the async action
   // already finished
-  expect(await screen.findByRole('header', { name: 'Welcome admin!' })).toBeOnTheScreen();
+  expect(await screen.findByRole('heading', { name: 'Welcome admin!' })).toBeOnTheScreen();
 
   // Idiom: use `queryBy*` with `expect().not.toBeOnTheScreen()` to assess that element is not present.
-  expect(screen.queryByRole('header', { name: 'Sign in to Example App' })).not.toBeOnTheScreen();
+  expect(screen.queryByRole('heading', { name: 'Sign in to Example App' })).not.toBeOnTheScreen();
   expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
   expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
 });
@@ -67,7 +67,7 @@ test('User will see errors for incorrect credentials', async () => {
   const user = userEvent.setup();
   await render(<App />);
 
-  expect(screen.getByRole('header', { name: 'Sign in to Example App' })).toBeOnTheScreen();
+  expect(screen.getByRole('heading', { name: 'Sign in to Example App' })).toBeOnTheScreen();
 
   await user.type(screen.getByLabelText('Username'), 'admin');
   await user.type(screen.getByLabelText('Password'), 'qwerty123');
@@ -76,7 +76,7 @@ test('User will see errors for incorrect credentials', async () => {
   // Hint: you can use custom Jest Native matcher to check text content.
   expect(await screen.findByRole('alert')).toHaveTextContent('Incorrect username or password');
 
-  expect(screen.getByRole('header', { name: 'Sign in to Example App' })).toBeOnTheScreen();
+  expect(screen.getByRole('heading', { name: 'Sign in to Example App' })).toBeOnTheScreen();
   expect(screen.getByLabelText('Username')).toBeOnTheScreen();
   expect(screen.getByLabelText('Password')).toBeOnTheScreen();
 });
@@ -88,7 +88,7 @@ test('User can sign in after incorrect attempt', async () => {
   const user = userEvent.setup();
   await render(<App />);
 
-  expect(screen.getByRole('header', { name: 'Sign in to Example App' })).toBeOnTheScreen();
+  expect(screen.getByRole('heading', { name: 'Sign in to Example App' })).toBeOnTheScreen();
 
   const usernameInput = screen.getByLabelText('Username');
   const passwordInput = screen.getByLabelText('Password');
@@ -105,8 +105,8 @@ test('User can sign in after incorrect attempt', async () => {
   await user.type(passwordInput, 'admin1');
   await user.press(screen.getByRole('button', { name: 'Sign In' }));
 
-  expect(await screen.findByText('Welcome admin!')).toBeOnTheScreen();
-  expect(screen.queryByRole('header', { name: 'Sign in to Example App' })).not.toBeOnTheScreen();
+  expect(await screen.findByRole('heading', { name: 'Welcome admin!' })).toBeOnTheScreen();
+  expect(screen.queryByRole('heading', { name: 'Sign in to Example App' })).not.toBeOnTheScreen();
   expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
   expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
 });

examples/basic/components/Home.tsx

@@ -8,7 +8,7 @@ type Props = {
 export function Home({ user }: Props) {
   return (
     <View style={styles.container}>
-      <Text accessibilityRole="header" style={styles.title}>
+      <Text role="heading" style={styles.title}>
         Welcome {user}!
       </Text>
     </View>

examples/basic/components/LoginForm.tsx

@@ -28,15 +28,15 @@ export function LoginForm({ onLoginSuccess }: Props) {
 
   return (
     <View style={styles.container}>
-      <Text accessibilityRole="header" style={styles.title}>
+      <Text role="heading" style={styles.title}>
         Sign in to Example App
       </Text>
 
       <Text style={styles.textLabel}>Username</Text>
       <TextInput
         value={username}
         onChangeText={setUsername}
-        accessibilityLabel="Username"
+        aria-label="Username"
         autoCapitalize="none"
         style={styles.textInput}
       />
@@ -45,19 +45,19 @@ export function LoginForm({ onLoginSuccess }: Props) {
       <TextInput
         value={password}
         onChangeText={setPassword}
-        accessibilityLabel="Password"
+        aria-label="Password"
         secureTextEntry={true}
         style={styles.textInput}
       />
 
       {error && (
-        <Text accessibilityRole="alert" style={styles.validator}>
+        <Text role="alert" style={styles.validator}>
           {error}
         </Text>
       )}
 
       <Pressable
-        accessibilityRole="button"
+        role="button"
         disabled={isLoading}
         onPress={handleSignIn}
         style={styles.button}

examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native';
+import { render, screen } from '@testing-library/react-native';
 import React from 'react';
 import PhoneBook from '../PhoneBook';
 import {

examples/cookbook/app/network-requests/components/FavoritesList.tsx

@@ -10,7 +10,7 @@ export default ({ users }: { users: User[] }) => {
         <Image
           source={{ uri: picture.thumbnail }}
           style={styles.userImage}
-          accessibilityLabel={'favorite-contact-avatar'}
+          aria-label="favorite-contact-avatar"
         />
       </View>
     );

examples/cookbook/app/state-management/jotai/TaskList.tsx

@@ -31,13 +31,13 @@ export function TaskList() {
       {!tasks.length ? <Text>No tasks, start by adding one...</Text> : null}
 
       <TextInput
-        accessibilityLabel="New Task"
+        aria-label="New Task"
         placeholder="New Task..."
         value={newTaskTitle}
         onChangeText={(text) => setNewTaskTitle(text)}
       />
 
-      <Pressable accessibilityRole="button" onPress={handleAddTask}>
+      <Pressable role="button" onPress={handleAddTask}>
         <Text>Add Task</Text>
       </Pressable>
     </View>

examples/cookbook/basics-tutorial-react-strict-dom/3-jest-matchers-rsd.test.tsx

@@ -13,7 +13,7 @@ test('showcase: toBeOnTheScreen', async () => {
   expect(screen.queryByTestId('non-existent')).not.toBeOnTheScreen();
 });
 
-test('showcase: toBeIntoHaveTextContentTheDocument', async () => {
+test('showcase: toHaveTextContent', async () => {
   await render(
     <html.div>
       <html.p data-testid="text">Hello World</html.p>

examples/cookbook/basics-tutorial/3-jest-matchers.test.tsx

@@ -17,7 +17,6 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react-native';
 import { Text, TextInput, View } from 'react-native';
-import { s } from 'react-strict-dom/runtime';
 
 /**
  * MATCHER 1: toBeOnTheScreen()
@@ -57,7 +56,7 @@ test('showcase: toBeOnTheScreen', async () => {
  * - expect(element).toHaveTextContent(/pattern/i) - regex with case-insensitive flag
  * - expect(element).toHaveTextContent('partial', { exact: false })
  */
-test('showcase: toBeIntoHaveTextContentTheDocument', async () => {
+test('showcase: toHaveTextContent', async () => {
   await render(
     <View>
       <Text testID="text">Hello World</Text>