@testing-library/react-native 12.1.1 → 12.1.3

package/examples/react-navigation/src/DrawerNavigator.test.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderNavigator } from './test-utils';
+import DrawerNavigator from './DrawerNavigator';
+
+test('Changing screens', () => {
+  renderNavigator(<DrawerNavigator />);
+
+  // Assert initial screen
+  expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
+
+  // Open drawer by pressing button
+  const toggleButton = screen.getByText('Toggle drawer');
+  fireEvent.press(toggleButton);
+
+  // Assert drawer state
+  expect(screen.getByRole('button', { name: 'Home' })).toHaveAccessibilityState(
+    { selected: true }
+  );
+  expect(
+    screen.getByRole('button', { name: 'Settings' })
+  ).toHaveAccessibilityState({ selected: false });
+
+  // Press drawer item
+  fireEvent.press(screen.getByRole('button', { name: 'Settings' }));
+
+  // Assert drawer state after action
+  expect(screen.getByRole('button', { name: 'Home' })).toHaveAccessibilityState(
+    { selected: false }
+  );
+  expect(
+    screen.getByRole('button', { name: 'Settings' })
+  ).toHaveAccessibilityState({ selected: true });
+
+  // Assert visible screen
+  expect(
+    screen.getByRole('header', { name: 'Settings screen' })
+  ).toBeOnTheScreen();
+  expect(
+    screen.queryByRole('header', { name: 'Home screen' })
+  ).not.toBeOnTheScreen();
+});

package/examples/react-navigation/src/NativeStackNavigator.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from './screens/HomeScreen';
+import DetailsScreen from './screens/DetailsScreen';
+
+const Stack = createNativeStackNavigator();
+
+export default function Navigation() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Details" component={DetailsScreen} />
+    </Stack.Navigator>
+  );
+}

package/examples/react-navigation/src/NativeStackNavigator.test.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderNavigator } from './test-utils';
+import NativeStackNavigator from './NativeStackNavigator';
+
+test('Home screen contains the header and list of items', () => {
+  renderNavigator(<NativeStackNavigator />);
+
+  expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
+  expect(screen.getAllByRole('button', { name: /Item/ })).toHaveLength(10);
+
+  expect(
+    screen.queryByRole('header', { name: /Details for item/i })
+  ).not.toBeOnTheScreen();
+});
+
+test('Pressing an item takes user to the details screen', () => {
+  renderNavigator(<NativeStackNavigator />);
+
+  const item5 = screen.getByRole('button', { name: 'Item 5' });
+  fireEvent.press(item5);
+
+  expect(
+    screen.getByRole('header', { name: 'Details for Item 5' })
+  ).toBeOnTheScreen();
+  expect(
+    screen.getByText('The number you have chosen is 5.')
+  ).toBeOnTheScreen();
+
+  // Home screen is still in the element tree but it is hidden from accessibility
+  expect(
+    screen.queryByRole('header', { name: 'Home screen' })
+  ).not.toBeOnTheScreen();
+});

package/examples/react-navigation/src/StackNavigator.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import HomeScreen from './screens/HomeScreen';
+import DetailsScreen from './screens/DetailsScreen';
+
+const Stack = createStackNavigator();
+
+export default function Navigation() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Details" component={DetailsScreen} />
+    </Stack.Navigator>
+  );
+}

package/examples/react-navigation/src/StackNavigator.test.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderNavigator } from './test-utils';
+import StackNavigator from './StackNavigator';
+
+test('Home screen contains the header and list of items', () => {
+  renderNavigator(<StackNavigator />);
+
+  expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
+  expect(screen.getAllByRole('button', { name: /Item/ })).toHaveLength(10);
+
+  expect(
+    screen.queryByRole('header', { name: /Details for item/i })
+  ).not.toBeOnTheScreen();
+});
+
+test('Pressing an item takes user to the details screen', () => {
+  renderNavigator(<StackNavigator />);
+
+  const item5 = screen.getByRole('button', { name: 'Item 5' });
+  fireEvent.press(item5);
+
+  expect(
+    screen.getByRole('header', { name: 'Details for Item 5' })
+  ).toBeOnTheScreen();
+  expect(
+    screen.getByText('The number you have chosen is 5.')
+  ).toBeOnTheScreen();
+
+  // Home screen is still in the element tree but it is hidden from accessibility
+  expect(
+    screen.queryByRole('header', { name: 'Home screen' })
+  ).not.toBeOnTheScreen();
+});

package/examples/react-navigation/src/TabNavigator.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import HomeScreen from './screens/HomeScreen';
+import SettingsScreen from './screens/SettingsScreen';
+
+const Tab = createBottomTabNavigator();
+
+export default function Navigation() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}

package/examples/react-navigation/src/TabNavigator.test.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderNavigator } from './test-utils';
+import TabNavigator from './TabNavigator';
+
+test('Changing tabs', () => {
+  renderNavigator(<TabNavigator />);
+  expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
+
+  // Note: React Navigation uses `button` role for tab buttons as workaround.
+  // It should actually be `tab` role.
+  const settingsTab = screen.getByRole('button', { name: 'Settings' });
+  fireEvent.press(settingsTab);
+
+  expect(
+    screen.getByRole('header', { name: 'Settings screen' })
+  ).toBeOnTheScreen();
+  expect(
+    screen.queryByRole('header', { name: 'Home screen' })
+  ).not.toBeOnTheScreen();
+});

package/examples/react-navigation/src/screens/DetailsScreen.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { StyleSheet, View, Text, Pressable } from 'react-native';
+
+export default function DetailsScreen({ navigation, route }) {
+  const item = route.params;
+  return (
+    <DetailsScreenContent item={item} onGoBack={() => navigation.goBack()} />
+  );
+}
+
+export function DetailsScreenContent({ item, onGoBack }) {
+  return (
+    <View>
+      <Text accessibilityRole="header" style={styles.header}>
+        Details for {item.title}
+      </Text>
+      <Text style={styles.body}>
+        The number you have chosen is {item.value}.
+      </Text>
+
+      <BackButton onPress={onGoBack} />
+    </View>
+  );
+}
+
+function BackButton({ onPress }) {
+  return (
+    <Pressable accessibilityRole="button" onPress={onPress}>
+      <Text>Go Back</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginVertical: 16,
+  },
+  body: {
+    textAlign: 'center',
+  },
+});

package/examples/react-navigation/src/screens/DetailsScreen.test.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { DetailsScreenContent } from './DetailsScreen';
+
+test('Details screen contains the header and content', () => {
+  const item = {
+    id: 100,
+    title: 'Item 100',
+    value: 100,
+  };
+
+  const onGoBack = jest.fn();
+
+  // Passing both navigation and route to the screen as props
+  render(<DetailsScreenContent item={item} onGoBack={onGoBack} />);
+
+  expect(
+    screen.getByRole('header', { name: 'Details for Item 100' })
+  ).toBeOnTheScreen();
+  expect(
+    screen.getByText('The number you have chosen is 100.')
+  ).toBeOnTheScreen();
+
+  // Note: Go Back button get navigation from `useNavigation` hook
+  fireEvent.press(screen.getByRole('button', { name: 'Go Back' }));
+  expect(onGoBack).toHaveBeenCalledTimes(1);
+});

package/examples/react-navigation/src/screens/DrawerHomeScreen.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StyleSheet, View, Text, Pressable } from 'react-native';
+
+export default function DrawerHomeScreen({ navigation }) {
+  const handleToggleDrawer = () => navigation.toggleDrawer();
+
+  return (
+    <View>
+      <Text accessibilityRole="header" style={styles.header}>
+        Home screen
+      </Text>
+
+      <Pressable accessiblityRole="button" onPress={handleToggleDrawer}>
+        <Text>Toggle drawer</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginVertical: 16,
+  },
+});

package/examples/react-navigation/src/screens/HomeScreen.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { StyleSheet, View, Text, FlatList, Pressable } from 'react-native';
+
+const mockData = new Array(20).fill(null).map((_, index) => ({
+  id: index + 1,
+  title: `Item ${index + 1}`,
+  value: index + 1,
+}));
+
+export default function HomeScreen({ navigation }) {
+  const handleItemPress = (item) => navigation.navigate('Details', item);
+
+  const renderItem = ({ item }) => {
+    return (
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => handleItemPress(item)}
+        style={styles.row}
+      >
+        <Text>{item.title}</Text>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View>
+      <Text accessibilityRole="header" style={styles.header}>
+        Home screen
+      </Text>
+
+      <FlatList data={mockData} renderItem={renderItem} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginVertical: 16,
+  },
+  row: {
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderBottomColor: '#DDDDDD',
+    borderBottomWidth: 1,
+  },
+});

package/examples/react-navigation/src/screens/SettingsScreen.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+export default function SettingsScreen() {
+  return (
+    <View>
+      <Text accessibilityRole="header" style={styles.header}>
+        Settings screen
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginVertical: 16,
+  },
+});

package/examples/react-navigation/src/test-utils.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-undef, import/no-extraneous-dependencies */
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { render } from '@testing-library/react-native';
+
+/**
+ * Render given JSX inside Navigation container.
+ * This should be used for rendering whole navigators as used by real app.
+ */
+export function renderNavigator(ui) {
+  return render(<NavigationContainer>{ui}</NavigationContainer>);
+}

package/examples/redux/App.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { StyleSheet, View, StatusBar } from 'react-native';
+import { Provider } from 'react-redux';
+import configureStore from './store';
+import AddTodo from './components/AddTodo';
+import TodoList from './components/TodoList';
+
+const store = configureStore();
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <View style={styles.container}>
+        <StatusBar barStyle="dark-content" />
+        <AddTodo />
+        <TodoList />
+      </View>
+    </Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 32,
+  },
+});

package/examples/redux/actions/todoActions.js

@@ -0,0 +1,25 @@
+export const actions = {
+  ADD: '@ADD_TODO',
+  REMOVE: '@REMOVE_TODO',
+  MODIFY: '@MODIFY_TODO',
+  CLEAR: '@CLEAR_TODO',
+};
+
+export const addTodo = (todo) => ({
+  type: actions.ADD,
+  payload: todo,
+});
+
+export const removeTodo = (id) => ({
+  type: actions.REMOVE,
+  payload: { id },
+});
+
+export const modifyTodo = (todo) => ({
+  type: actions.MODIFY,
+  payload: todo,
+});
+
+export const clearTodos = () => ({
+  type: actions.CLEAR,
+});

package/examples/redux/babel.config.js

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

package/examples/redux/components/AddTodo.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Button, StyleSheet, Text, View, TextInput } from 'react-native';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { addTodo } from '../actions/todoActions';
+
+export function AddTodo(props) {
+  const [text, setText] = React.useState('');
+
+  const submitForm = () => {
+    const todo = {
+      id: props.todoLength + 1,
+      text,
+      date: new Date(),
+    };
+
+    props.addTodo(todo);
+    setText('');
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Enter a text below to add a new todo</Text>
+      <TextInput
+        autoFocus
+        value={text}
+        style={styles.input}
+        returnKeyType="search"
+        onSubmitEditing={submitForm}
+        onChangeText={(t) => setText(t)}
+        placeholder="Enter the name of the repository here"
+      />
+
+      <Button onPress={submitForm} title="Submit form" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 156,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomColor: '#EEEEEE',
+    borderBottomWidth: 2,
+    marginBottom: 16,
+    padding: 16,
+  },
+  header: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  input: {
+    borderColor: '#DDDDDD',
+    borderWidth: 1,
+    paddingVertical: 8,
+    width: '100%',
+    textAlign: 'center',
+    borderRadius: 4,
+  },
+});
+
+const mapStateToProps = ({ todos }) => ({
+  todoLength: todos.length,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({ addTodo }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddTodo);

package/examples/redux/components/AddTodo.test.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderWithRedux } from '../test-utils';
+import AddTodo from './AddTodo';
+
+test('adds a new todo to redux store when submitting form', () => {
+  const { store } = renderWithRedux(<AddTodo />);
+
+  const input = screen.getByPlaceholderText(/repository/i);
+  expect(input).toBeTruthy();
+
+  const textToEnter = 'This is a random element';
+  fireEvent.changeText(input, textToEnter);
+  fireEvent.press(screen.getByText('Submit form'));
+
+  const todosState = store.getState().todos;
+  expect(todosState).toHaveLength(1);
+  expect(todosState).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        id: 1,
+        text: textToEnter,
+        date: expect.any(Date),
+      }),
+    ])
+  );
+});

package/examples/redux/components/TodoElem.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { StyleSheet, Button, Text, View } from 'react-native';
+
+export default function TodoElem({ todo, onDelete }) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <Text style={styles.text}>{todo.text}</Text>
+        <Text style={styles.date}>{new Date(todo.date).toDateString()}</Text>
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button onPress={() => onDelete(todo.id)} title="Delete" />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/examples/redux/components/TodoList.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { FlatList, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { removeTodo } from '../actions/todoActions';
+import TodoElem from './TodoElem';
+
+export function TodoList(props) {
+  const onDeleteTodo = (id) => props.removeTodo(id);
+
+  return (
+    <FlatList
+      data={props.todos}
+      keyExtractor={(todo) => todo.id.toString()}
+      renderItem={({ item }) => (
+        <TodoElem todo={item} onDelete={onDeleteTodo} />
+      )}
+    />
+  );
+}
+
+const mapStateToProps = (state) => ({
+  todos: state.todos,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({ removeTodo }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

package/examples/redux/components/TodoList.test.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderWithRedux } from '../test-utils';
+import TodoList from './TodoList';
+
+const initialState = {
+  todos: [
+    { id: 1, text: 'Sing something', date: new Date() },
+    { id: 2, text: 'Dance something', date: new Date() },
+    { id: 3, text: 'Sleep something', date: new Date() },
+    { id: 4, text: 'Sleep something', date: new Date() },
+  ],
+};
+
+test('it should execute with a store with 4 elements', () => {
+  renderWithRedux(<TodoList />, { initialState });
+
+  const todoElems = screen.getAllByText(/something/i);
+  expect(todoElems).toHaveLength(4);
+});
+
+test('should display 4 elements and end up with 3 after delete', () => {
+  renderWithRedux(<TodoList />, { initialState });
+
+  const todoElems = screen.getAllByText(/something/i);
+  expect(todoElems.length).toBe(4);
+
+  const buttons = screen.getAllByText('Delete');
+  expect(buttons).toHaveLength(4);
+  fireEvent.press(buttons[0]);
+
+  const buttonsAfterDelete = screen.getAllByText('Delete');
+  expect(buttonsAfterDelete).toHaveLength(3);
+});

package/examples/redux/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in the Expo client or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/examples/redux/jest-setup.js

@@ -0,0 +1,2 @@
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/examples/redux/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: '@testing-library/react-native',
+  setupFiles: ['./jest-setup.js'],
+};

package/examples/redux/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "redux-example",
+  "description": "Testing Redux interactions with RNTL",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "react": "~18.0.0",
+    "react-native": "~0.69.2",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@testing-library/react-native": "^11.0.0",
+    "@types/jest": "^28.0.0",
+    "jest": "^28.0.0",
+    "metro-react-native-babel-preset": "^0.70.0",
+    "react-test-renderer": "^18.0.0"
+  }
+}

package/examples/redux/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import todos from './todoReducer';
+
+export default combineReducers({
+  todos,
+});