@testing-library/react-native 12.2.1 → 12.3.0

package/examples/redux/App.js

@@ -1,27 +0,0 @@
-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/README.md

@@ -1,5 +0,0 @@
-# RNTL example app for Redux
-
-**Note: this example is stale and might not function correctly.**
-
-This example shows how to write integration tests using Redux without mocking it.

package/examples/redux/actions/todoActions.js

@@ -1,25 +0,0 @@
-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

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

package/examples/redux/components/AddTodo.js

@@ -1,73 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,2 +0,0 @@
-// 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

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

package/examples/redux/package.json

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

package/examples/redux/reducers/index.js

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

package/examples/redux/reducers/todoReducer.js

@@ -1,27 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/* 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 };
-}