@testing-library/react-native 12.2.1 → 12.3.0

package/examples/basic/__tests__/App.test.tsx

@@ -1,137 +0,0 @@
-import * as React from 'react';
-import {
-  render,
-  screen,
-  fireEvent,
-  userEvent,
-} from '@testing-library/react-native';
-import App from '../App';
-
-jest.useFakeTimers();
-
-/**
- * A good place to start is having a tests that your component renders correctly.
- */
-test('renders correctly', () => {
-  // Idiom: no need to capture render output, as we will use `screen` for queries.
-  render(<App />);
-
-  // 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();
-});
-
-/**
- * Hint: It's best when your tests are similar to what a manual test scenarions would look like,
- * i.e. a series of actions taken by the user, followed by a series of assertions verified from
- * his point of view.
- */
-test('User can sign in successully with correct credentials', async () => {
-  // Setup User Event instance for realistic simulation of user interaction.
-  const user = userEvent.setup();
-
-  // Idiom: no need to capture render output, as we will use `screen` for queries.
-  render(<App />);
-
-  // 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();
-
-  // Hint: we can use `getByLabelText` to find our text inputs using their labels.
-  await user.type(screen.getByLabelText('Username'), 'admin');
-  await user.type(screen.getByLabelText('Password'), 'admin1');
-
-  // Hint: we can use `getByRole` to find our button with given text.
-  await user.press(screen.getByRole('button', { name: 'Sign In' }));
-
-  // Idiom: since pressing button triggers async operation we need to use `findBy*` query to wait
-  // 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();
-
-  // 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.queryByLabelText('Username')).not.toBeOnTheScreen();
-  expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
-});
-
-/**
- * Another test case based on manual test scenario.
- *
- * Hint: Try to tests what a user would see and do, instead of assering internal component state
- * that is not directly reflected in the UI.
- *
- * For this reason prefer quries that correspond to things directly observable by the user like:
- * `getByRole`, `getByText`, `getByLabelText`, `getByPlaceholderText, `getByDisplayValue`, etc.
- * over `getByTestId` which is not directly observable by the user.
- *
- * Note: that some times you will have to resort to `getByTestId`, but treat it as a last resort.
- */
-test('User will see errors for incorrect credentials', async () => {
-  const user = userEvent.setup();
-  render(<App />);
-
-  expect(
-    screen.getByRole('header', { name: 'Sign in to Example App' })
-  ).toBeOnTheScreen();
-
-  await user.type(screen.getByLabelText('Username'), 'admin');
-  await user.type(screen.getByLabelText('Password'), 'qwerty123');
-  await user.press(screen.getByRole('button', { name: 'Sign In' }));
-
-  // 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.getByLabelText('Username')).toBeOnTheScreen();
-  expect(screen.getByLabelText('Password')).toBeOnTheScreen();
-});
-
-/**
- * Do not be afraid to write longer test scenarios, with repeating act and assert statements.
- */
-test('User can sign in after incorrect attempt', async () => {
-  const user = userEvent.setup();
-  render(<App />);
-
-  expect(
-    screen.getByRole('header', { name: 'Sign in to Example App' })
-  ).toBeOnTheScreen();
-
-  const usernameInput = screen.getByLabelText('Username');
-  const passwordInput = screen.getByLabelText('Password');
-
-  await user.type(usernameInput, 'admin');
-  await user.type(passwordInput, 'qwerty123');
-  await user.press(screen.getByRole('button', { name: 'Sign In' }));
-
-  expect(await screen.findByRole('alert')).toHaveTextContent(
-    'Incorrect username or password'
-  );
-
-  // Workaround for clearing TextInput, clear() function will be added soon.
-  fireEvent.changeText(passwordInput, '');
-
-  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(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
-  expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
-});

package/examples/basic/app.json

@@ -1,31 +0,0 @@
-{
-  "expo": {
-    "name": "RNTL Example Basic",
-    "slug": "rntl-example-basic",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": ["**/*"],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF"
-      }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
-  }
-}

package/examples/basic/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};

package/examples/basic/components/Home.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-
-type Props = {
-  user: string;
-};
-
-export function Home({ user }: Props) {
-  return (
-    <View style={styles.container}>
-      <Text accessibilityRole="header" style={styles.title}>
-        Welcome {user}!
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  title: {
-    alignSelf: 'center',
-    fontSize: 24,
-    marginTop: 8,
-    marginBottom: 40,
-  },
-});

package/examples/basic/components/LoginForm.tsx

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  TextInput,
-  Pressable,
-  ActivityIndicator,
-} from 'react-native';
-
-type Props = {
-  onLoginSuccess: (user: string) => void;
-};
-
-export function LoginForm({ onLoginSuccess }: Props) {
-  const [username, setUsername] = React.useState('');
-  const [password, setPassword] = React.useState('');
-  const [error, setError] = React.useState<string | undefined>();
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  const handleSignIn = async () => {
-    setIsLoading(true);
-
-    const user = await authUser(username, password);
-    setIsLoading(false);
-
-    if (user) {
-      setError(undefined);
-      onLoginSuccess(user);
-    } else {
-      setError('Incorrect username or password');
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text accessibilityRole="header" style={styles.title}>
-        Sign in to Example App
-      </Text>
-
-      <Text style={styles.textLabel}>Username</Text>
-      <TextInput
-        value={username}
-        onChangeText={setUsername}
-        accessibilityLabel="Username"
-        autoCapitalize="none"
-        style={styles.textInput}
-      />
-
-      <Text style={styles.textLabel}>Password</Text>
-      <TextInput
-        value={password}
-        onChangeText={setPassword}
-        accessibilityLabel="Password"
-        secureTextEntry={true}
-        style={styles.textInput}
-      />
-
-      {error && (
-        <Text accessibilityRole="alert" style={styles.validator}>
-          {error}
-        </Text>
-      )}
-
-      <Pressable
-        accessibilityRole="button"
-        disabled={isLoading}
-        onPress={handleSignIn}
-        style={styles.button}
-      >
-        {isLoading ? (
-          <ActivityIndicator color="white" />
-        ) : (
-          <Text style={styles.buttonText}>Sign In</Text>
-        )}
-      </Pressable>
-    </View>
-  );
-}
-
-/**
- * Fake authentication function according to our abilities.
- * @param username The username to authenticate.
- * @param password The password to authenticate.
- * @returns username if the username and password are correct, null otherwise.
- */
-async function authUser(
-  username: string,
-  password: string
-): Promise<string | null> {
-  return new Promise((resolve) =>
-    setTimeout(() => {
-      const hasValidCredentials = username === 'admin' && password === 'admin1';
-      resolve(hasValidCredentials ? username : null);
-    }, 250)
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  title: {
-    alignSelf: 'center',
-    fontSize: 24,
-    marginTop: 8,
-    marginBottom: 40,
-  },
-  textLabel: {
-    fontSize: 16,
-    color: '#444',
-  },
-  textInput: {
-    fontSize: 20,
-    padding: 8,
-    marginVertical: 8,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  button: {
-    backgroundColor: '#3256a8',
-    padding: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 20,
-    minHeight: 56,
-  },
-  buttonText: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: 'white',
-  },
-  validator: {
-    color: 'red',
-    fontSize: 18,
-    marginTop: 8,
-  },
-});

package/examples/basic/jest-setup.ts

@@ -1,7 +0,0 @@
-/* eslint-disable no-undef, import/no-extraneous-dependencies */
-
-// Import Jest Native matchers
-import '@testing-library/jest-native/extend-expect';
-
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/examples/basic/jest.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  preset: '@testing-library/react-native',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  setupFilesAfterEnv: ['./jest-setup.ts'],
-};

package/examples/basic/package.json

@@ -1,30 +0,0 @@
-{
-  "main": "node_modules/expo/AppEntry.js",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject",
-    "test": "jest",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "expo": "^49.0.0",
-    "expo-status-bar": "~1.6.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.72.3",
-    "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.0",
-    "@types/react": "~18.2.14",
-    "jest": "^29.3.0",
-    "react-test-renderer": "18.2.0",
-    "typescript": "^5.1.3"
-  },
-  "private": true
-}

package/examples/basic/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true,
-    "allowJs": false
-  }
-}