Как написать функциональные тестовые случаи в реагировать на родной?

Question

Я новичок, чтобы реагировать на родных. Я реализовал функциональное тестирование и модульное тестирование снимков, но не знаю, как писать функциональные тесты и тесты на уровне API. Я использую фермент и шутку. также я использовал излишек для государственного управления.

следующие мои файлы.

Приложение. js

/* 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 (
      <Provider store={store}>
        <View style={styles.container}>
          <Navigation />
        </View>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 50,
  },
});

home. js

/* 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 = () => (
    <View style={styles.flatListItemSeparator} />
  )

  renderItem = ({ item }) => (

    <View style={styles.listRowContainer}>

      <TouchableOpacity onPress={() => this.props.navigation.navigate('ThumbnailViewScreen', {
        albumID: item.id,
      })} style={styles.listRow}>
        <View style={styles.listTextNavVIew}>
          <Text style={styles.albumTitle}> {item.title} </Text>
          <Ionicons name='md-arrow-dropright' style={styles.detailArrow} />
        </View>
      </TouchableOpacity>

    </View>
  );

  render() {
    const { error, loading, albums } = this.props;

    if (error) {
      return <ErrorAlert />;
    }

    if (loading) {
      return (
        <View style={{ flex: 1, paddingTop: 30 }}>
            <ActivityIndicator animating={true} size='large' />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer} >
        <FlatList
          styles={styles.container}
          data={albums}
          renderItem={this.renderItem}
          ItemSeparatorComponent={this.FlatListItemSeparator}

        />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  const storedRepositories = state.albums.map((repo) => ({ key: repo.id.toString(), ...repo }));
  return {
    albums: storedRepositories,
    loading: state.loading,
    error: state.error,
  };
};

const mapDispatchToProps = {
  listRepos,
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

редуктор. js

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}`,
      },
    },
  };
}

Answer 1

1. Макетная выборка реакции native

Хорошо, для тестирования API в первую очередь вам потребуется использовать некоторую функцию для выборки (функцию выборки), но ее нужно будет смоделировать, поскольку вы не хотите делать реальный запрос во время тестирования. ,

// Mocking the global.fetch included in React Native
global.fetch = jest.fn();

// Helper to mock a success response (only once)
fetch.mockResponseSuccess = (body) => {
  fetch.mockImplementationOnce (
    () => Promise.resolve({json: () => Promise.resolve(JSON.parse(body))})
  );
};

// Helper to mock a failure response (only once)
fetch.mockResponseFailure = (error) => {
  fetch.mockImplementationOnce(
    () => Promise.reject(error)
  );
};

2. Используйте mocked store

, затем вам нужно будет использовать mocked-версию вашего магазина приставок, которую вы можете использовать, используя redux-mock-store

// __mocks__/redux-mock-store.js
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [ thunk ];
const mockStore = configureMockStore(middlewares);

export default mockStore;

3. Тестирование asyn c действий

после того, как вы завершите настройку sh, теперь вы можете проверить свои асин c действия. В этом случае вы тестируете их:

• Успешный запрос должен инициировать действия запроса и успеха
• Запрос сбоя должен инициировать действия запроса и отказа

it('should handle TEST_API_SUCCESS action', async () => {
  const response = '{"items": [{"id": 1}]}';
  fetch.mockResponseSuccess(response);
  await store.dispatch(fetchData('/test', receiveTestData));
  expect(store.getActions()).toMatchSnapshot();
});

все кредиты и дополнительную информацию вы можете найти на: Callstack