title: how to write functional unit test cases in react native?
body: <p>I am new to react native. I have implemented functionality and snapshot unit testing but not sure how to write functional and API level unit test cases. I am using enzyme and jest. also I have used redux for state management. </p>
  
  <p>following is my few files .</p>
  
  <p>App.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint-disable no-unused-vars */
  /* eslint-disable no-use-before-define */
  /* eslint-disable class-methods-use-this */
  
  import React, { Component } from 'react';
  import { StyleSheet, View } from 'react-native';
  import { createStore, applyMiddleware } from 'redux';
  import { Provider } from 'react-redux';
  import axios from 'axios';
  import axiosMiddleware from 'redux-axios-middleware';
  import * as myConstant from './src/common/constants';
  
  import reducer from './src/reducer/reducer';
  import Navigation from './src/common/navigator';
  
  
  const client = axios.create({
    baseURL: myConstant.API,
    responseType: 'json',
    timeout: 25000,
  });
  
  const store = createStore(reducer, applyMiddleware(axiosMiddleware(client)));
  
  
  export default class App extends Component {
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;View style={styles.container}&gt;
            &lt;Navigation /&gt;
          &lt;/View&gt;
        &lt;/Provider&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      marginTop: 50,
    },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>home.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint-disable import/no-extraneous-dependencies */
  /* eslint-disable no-unused-vars */
  import React, { Component } from 'react';
  import { ActivityIndicator } from 'react-native-paper';
  import {
    View, Text, FlatList, TouchableOpacity,
  } from 'react-native';
  import { connect } from 'react-redux';
  import { Ionicons } from '@expo/vector-icons';
  import styles from './style';
  import { listRepos } from '../../reducer/reducer';
  import ErrorAlert from '../../common/errorAlertComponent/errorAlert';
  
  
  class Home extends Component {
    componentDidMount() {
      this.props.listRepos();
    }
  
    FlatListItemSeparator = () =&gt; (
      &lt;View style={styles.flatListItemSeparator} /&gt;
    )
  
    renderItem = ({ item }) =&gt; (
  
      &lt;View style={styles.listRowContainer}&gt;
  
        &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.navigate('ThumbnailViewScreen', {
          albumID: item.id,
        })} style={styles.listRow}&gt;
          &lt;View style={styles.listTextNavVIew}&gt;
            &lt;Text style={styles.albumTitle}&gt; {item.title} &lt;/Text&gt;
            &lt;Ionicons name='md-arrow-dropright' style={styles.detailArrow} /&gt;
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
  
      &lt;/View&gt;
    );
  
    render() {
      const { error, loading, albums } = this.props;
  
      if (error) {
        return &lt;ErrorAlert /&gt;;
      }
  
      if (loading) {
        return (
          &lt;View style={{ flex: 1, paddingTop: 30 }}&gt;
              &lt;ActivityIndicator animating={true} size='large' /&gt;
          &lt;/View&gt;
        );
      }
      return (
        &lt;View style={styles.MainContainer} &gt;
          &lt;FlatList
            styles={styles.container}
            data={albums}
            renderItem={this.renderItem}
            ItemSeparatorComponent={this.FlatListItemSeparator}
  
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    const storedRepositories = state.albums.map((repo) =&gt; ({ key: repo.id.toString(), ...repo }));
    return {
      albums: storedRepositories,
      loading: state.loading,
      error: state.error,
    };
  };
  
  const mapDispatchToProps = {
    listRepos,
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Home);</code></pre>
  </div>
  </div>
  </p>
  
  <p>reducer.js </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const GET_ALBUM = 'album/LOAD';
  export const GET_ALBUM_SUCCESS = 'album/LOAD_SUCCESS';
  export const GET_ALBUM_FAIL = 'album/LOAD_FAIL';
  
  
  const initialState = {
    albums: [],
    loading: false,
    error: null,
  };
  
  
  export default function reducer(state = initialState, action) {
    switch (action.type) {
      case GET_ALBUM:
        return { ...state, loading: true };
      case GET_ALBUM_SUCCESS:
        return { ...state, loading: false, albums: action.payload.data };
      case GET_ALBUM_FAIL:
        return {
          ...state,
          loading: false,
          error: 'Error while fetching albums',
        };
      default:
        return state;
    }
  }
  
  export function listRepos() {
    return {
      type: GET_ALBUM,
      payload: {
        request: {
          url: 'photos/',
        },
      },
    };
  }
  
  export function listThumb(albumId) {
    return {
      type: GET_ALBUM,
      payload: {
        request: {
          url: `photos?albumId=${albumId}`,
        },
      },
    };
  }</code></pre>
  </div>
  </div>
  </p>