ReactNative：snapshotのテストにおけるＭockの方法が分かりません

Question

###前提・実現したいこと
現在、ReactNativeで、iPad、Windows Tabletをターゲットとしたタブレットアプリを開発しています。
APIから取得したプロジェクト一覧を表示するような画面を実装して、
jestのsnapshotを使って画面のテストを実装してみたのですが、
APIの呼び出し部分のＭockの方法が分からず困っています。

ご回答よろしくお願いいたします。

###該当のソースコード
Home.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  FlatList,
  View,
  TouchableHighlight,
} from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../Actions';
import 'fetch-everywhere';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projects: [],
    };
  }

  componentWillMount = (props) => {
    const { dispatch } = this.props;
    // ここでプロジェクト一覧のデータを取得するAPIの呼び出し
    this.props.actions.getAllProjects();
  }

  render() {
    const props = this.props;
    const { navigate } = this.props.navigation;

    return (
      <View>
        <FlatList style={styles.list}
          // APIから取得したデータを取り出す(※ここをMockしたい※)
          // 今の状態でテストするとdataの中身が空になります
          data={props.projects.getAllProjects.projects}
          renderItem={({item}) => 
            <TouchableHighlight onPress={() => navigate('Project', { project: item })} underlayColor='paleturquoise'>
              <View style={styles.project}>
                <Text style={styles.projectName}>{item.title}</Text>
              </View>
            </TouchableHighlight>
          }
        />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  project: {
    margin: 10,
  },
  list: {
    marginTop: 20,
  },
  projectName: {
    fontSize: 20,
    textAlign: 'left',
    flex: 1,
  },
});

const mapStateToProps = (state) => {
  return {
    projects: state,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

index.ios.js(テストコード)

import 'react-native';
import React from 'react';
import Index from '../index.ios.js';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <Index />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

index.ios.js.snap(自動生成されたスナップショット)

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#F5FCFF",
      "flex": 1,
      "justifyContent": "center",
    }
  }
>
  <View>
    <Text
      accessible={true}
      allowFontScaling={true}
      disabled={false}
      ellipsizeMode="tail"
      style={
        Object {
          "fontSize": 30,
          "fontWeight": "bold",
          "marginTop": 20,
          "textAlign": "center",
        }
      }
    >
      プロジェクト一覧
    </Text>
    <RCTScrollView
      ListHeaderComponent={undefined}
      // 今の状態だとdataの中身が空
      data={Array []}
      disableVirtualization={false}
      getItem={[Function]}
      getItemCount={[Function]}
      horizontal={false}
      initialNumToRender={10}
      keyExtractor={[Function]}
      maxToRenderPerBatch={10}
      numColumns={1}
      onContentSizeChange={[Function]}
      onEndReachedThreshold={2}
      onLayout={[Function]}
      onMomentumScrollEnd={[Function]}
      onScroll={[Function]}
      onScrollBeginDrag={[Function]}
      onScrollEndDrag={[Function]}
      onViewableItemsChanged={undefined}
      renderItem={[Function]}
      renderScrollComponent={[Function]}
      scrollEventThrottle={50}
      stickyHeaderIndices={Array []}
      style={
        Object {
          "marginTop": 20,
        }
      }
      updateCellsBatchingPeriod={50}
      windowSize={21}
    >
      <View />
    </RCTScrollView>
  </View>
</View>
`;

Answer 1

React の思想や Jest のスナップショットテスティングのやりかたとして次があります

• テスト対象: あるコンポーネントに対して
• 入力: 特定の props を与えたときに
• 出力: 想定した仮想 DOM ツリーになる

ですので、コンポーネントとしてテスト可能にするために data を props として与えてやる設計として、 data prop のパターンをいくつか作ってテストしてやる、というのが妥当かなと思います

API のテストは別で async/await を使ったテストケースを作ってやればよいでしょう

答えになっていますでしょうか ?

Comments

[mariek]

ご回答ありがとうございます！
> コンポーネントとしてテスト可能にするために `data` を props として与えてやる設計として、 `data` prop のパターンをいくつか作ってテストしてやる、
設計を変更するかどうかは改めて検討したいと思います。

現在の設計を変更せずに、テストコードを工夫してMockする方法はないということでしょうか・・？

[januswel]

`projects.getAllProjects.projects` にダミーデータを入れて `Home` コンポーネントに props として `projects` を渡すことでいけそうですが

[mariek]

ご回答ありがとうございます。
教えていただいた情報でちょっと試してみたいと思います。
試した結果、またご報告させていただきます！