@testing-library/react-native 12.1.2 → 12.1.3

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,
+});

package/examples/redux/reducers/todoReducer.js

@@ -0,0 +1,27 @@
+import { actions } from '../actions/todoActions.js';
+
+export default function todoReducer(state = [], action) {
+  switch (action.type) {
+    case actions.ADD:
+      return state.concat(action.payload);
+
+    case actions.REMOVE:
+      return state.filter((todo) => todo.id !== action.payload.id);
+
+    case actions.MODIFY:
+      return state.map((todo) => {
+        if (todo.id === action.payload.id) {
+          return {
+            ...todo,
+            ...action.payload,
+          };
+        }
+      });
+
+    case actions.CLEAR:
+      return [];
+
+    default:
+      return state;
+  }
+}

package/examples/redux/store.js

@@ -0,0 +1,10 @@
+import { createStore } from 'redux';
+import reducers from './reducers';
+
+const initialStore = {
+  todos: [],
+};
+
+export default function configureStore(initialState = initialStore) {
+  return createStore(reducers, initialState);
+}

package/examples/redux/test-utils.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react-native';
+import configureStore from './store';
+
+export function renderWithRedux(ui, options) {
+  const store = options?.store ?? configureStore(options?.initialState);
+  const queries = render(<Provider store={store}>{ui}</Provider>);
+  return { ...queries, store };
+}

package/experiments-app/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/experiments-app/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/experiments-app/.expo/packager-info.json

@@ -0,0 +1,9 @@
+{
+  "expoServerPort": 19000,
+  "packagerPort": 19000,
+  "packagerPid": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
+  "webpackServerPort": null
+}

package/experiments-app/.expo/settings.json

@@ -0,0 +1,9 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false,
+  "scheme": null
+}

package/experiments-app/.gitignore

@@ -0,0 +1,17 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

package/experiments-app/.prettierrc.js

@@ -0,0 +1,5 @@
+// added for Jest inline snapshots to not use default Prettier config
+module.exports = {
+  singleQuote: true,
+  trailingComma: "es5"
+}

package/experiments-app/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "experiments-app",
+    "slug": "experiments-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/experiments-app/babel.config.js

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

package/experiments-app/index.js

@@ -0,0 +1,4 @@
+import registerRootComponent from 'expo/build/launch/registerRootComponent';
+import App from './src/App';
+
+registerRootComponent(App);

package/experiments-app/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "experiments-app",
+  "private": true,
+  "description": "Expo app for conducting experiments of React Native behaviour.",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "typecheck": "tsc -noEmit",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
+    "add": "^2.0.6",
+    "expo": "~48.0.11",
+    "expo-status-bar": "~1.4.4",
+    "react": "18.2.0",
+    "react-native": "0.71.6",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
+    "yarn": "^1.22.19"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.0.14",
+    "typescript": "^4.9.4"
+  }
+}

package/experiments-app/src/App.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { MainScreen } from './MainScreen';
+import { experiments } from './experiments';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="main"
+          component={MainScreen}
+          options={{ title: 'Experiments' }}
+        />
+        {experiments.map((exp) => (
+          <Stack.Screen
+            key={exp.key}
+            name={exp.key}
+            component={exp.component}
+            options={{ title: exp.title }}
+          />
+        ))}
+      </Stack.Navigator>
+      <StatusBar style="auto" />
+    </NavigationContainer>
+  );
+}

package/experiments-app/src/MainScreen.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  SafeAreaView,
+  Text,
+  FlatList,
+  Pressable,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { Experiment, experiments } from './experiments';
+
+export function MainScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={experiments}
+        renderItem={({ item }) => <ListItem item={item} />}
+      />
+    </SafeAreaView>
+  );
+}
+
+interface ListItemProps {
+  item: Experiment;
+}
+
+function ListItem({ item }: ListItemProps) {
+  const navigation = useNavigation();
+
+  const handlePress = () => {
+    navigation.navigate(item.key);
+  };
+
+  return (
+    <Pressable style={styles.item} onPress={handlePress}>
+      <Text style={styles.itemTitle}>{item.title}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  item: {
+    padding: 20,
+  },
+  itemTitle: {
+    fontSize: 20,
+  },
+});

package/experiments-app/src/experiments.ts

@@ -0,0 +1,17 @@
+import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
+import { TextInputEvents } from './screens/TextInputEvents';
+
+export type Experiment = (typeof experiments)[number];
+
+export const experiments = [
+  {
+    key: 'textInputEvents',
+    title: 'TextInput Events',
+    component: TextInputEvents,
+  },
+  {
+    key: 'textInputEventPropagation',
+    title: 'TextInput Event Propagation',
+    component: TextInputEventPropagation,
+  },
+];

package/experiments-app/src/screens/TextInputEventPropagation.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { StyleSheet, SafeAreaView, TextInput, Pressable } from 'react-native';
+import { buildEventLogger } from '../utils/helpers';
+
+const handlePressIn = buildEventLogger('TextInput.pressIn');
+const handlePressOut = buildEventLogger('TextInput.pressOut');
+const handleFocus = buildEventLogger('TextInput.focus');
+const handleBlur = buildEventLogger('TextInput.blur');
+const handleChange = buildEventLogger('TextInput.change');
+const handleSubmitEditing = buildEventLogger('TextInput.submitEditing');
+
+const handlePressablePress = buildEventLogger('Pressable.press');
+
+export function TextInputEventPropagation() {
+  const [value, setValue] = React.useState('');
+
+  const handleChangeText = (value: string) => {
+    setValue(value);
+    console.log(`Event: changeText`, value);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Pressable onPress={handlePressablePress}>
+        <TextInput
+          style={styles.textInput}
+          value={value}
+          editable={true}
+          onChangeText={handleChangeText}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onSubmitEditing={handleSubmitEditing}
+        />
+      </Pressable>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  textInput: {
+    backgroundColor: 'white',
+    margin: 20,
+    padding: 8,
+    fontSize: 18,
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+});

package/experiments-app/src/screens/TextInputEvents.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { StyleSheet, SafeAreaView, TextInput } from 'react-native';
+import { buildEventLogger } from '../utils/helpers';
+
+const handlePressIn = buildEventLogger('pressIn');
+const handlePressOut = buildEventLogger('pressOut');
+const handleFocus = buildEventLogger('focus');
+const handleBlur = buildEventLogger('blur');
+const handleChange = buildEventLogger('change');
+const handleSubmitEditing = buildEventLogger('submitEditing');
+
+export function TextInputEvents() {
+  const [value, setValue] = React.useState('');
+
+  const handleChangeText = (value: string) => {
+    setValue(value);
+    console.log(`Event: changeText`, value);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <TextInput
+        style={styles.textInput}
+        value={value}
+        editable={true}
+        onChangeText={handleChangeText}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        onSubmitEditing={handleSubmitEditing}
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  textInput: {
+    backgroundColor: 'white',
+    margin: 20,
+    padding: 8,
+    fontSize: 18,
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+});

package/experiments-app/src/utils/helpers.ts

@@ -0,0 +1,8 @@
+import { NativeSyntheticEvent } from 'react-native/types';
+
+export function buildEventLogger(name: string) {
+  return (event: NativeSyntheticEvent<unknown>) => {
+    const eventData = event?.nativeEvent ?? event;
+    console.log(`Event: ${name}`, eventData);
+  };
+}

package/experiments-app/tsconfig.json

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