chore: improve example apps using skill (#1878)

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,23 +45,18 @@ 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"
-        disabled={isLoading}
-        onPress={handleSignIn}
-        style={styles.button}
-      >
+      <Pressable role="button" disabled={isLoading} onPress={handleSignIn} style={styles.button}>
         {isLoading ? (
           <ActivityIndicator color="white" />
         ) : (

examples/basic/components/__tests__/AnimatedView.test.tsx

@@ -33,7 +33,7 @@ describe('AnimatedView', () => {
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });
 
-    await act(() => jest.advanceTimersByTime(250));
+    await act(() => jest.advanceTimersByTimeAsync(250));
     expect(screen.root).toHaveStyle({ opacity: 1 });
   });
 });

examples/basic/package.json

@@ -24,7 +24,7 @@
     "@testing-library/react-native": "^14.0.0-beta.0",
     "@types/jest": "^29.5.12",
     "@types/react": "~19.1.10",
-    "eslint": "^9.0.0",
+    "eslint": "9.39.2",
     "eslint-plugin-testing-library": "^7.1.1",
     "jest": "^29.7.0",
     "test-renderer": "0.14.0",

examples/basic/yarn.lock

@@ -3941,7 +3941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^9.0.0":
+"eslint@npm:9.39.2":
   version: 9.39.2
   resolution: "eslint@npm:9.39.2"
   dependencies:
@@ -7378,7 +7378,7 @@ __metadata:
     "@testing-library/react-native": "npm:^14.0.0-beta.0"
     "@types/jest": "npm:^29.5.12"
     "@types/react": "npm:~19.1.10"
-    eslint: "npm:^9.0.0"
+    eslint: "npm:9.39.2"
     eslint-plugin-testing-library: "npm:^7.1.1"
     expo: "npm:^54.0.32"
     expo-status-bar: "npm:~3.0.9"

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>