React NativeのテストにおいてComponentのpropsをダミーデータに置き換える方法がわかりません

Question

###前提・実現したいこと
ReactNativeでアプリを開発しています。
アーキテクチャはreduxを採用しています。

現在、Snapshotテストを作成しようとしているのですが、Componentのpropsをダミーデータに置き換えるテストの方法がよくわかりません。

###テストコード
テストコードは以下のようにしています。

import 'react-native';
import React from 'react';
import Home from '../src/components/Home.js';
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import appReducer from '../src/reducers/AppReducer';
import configureStore from '../src/ConfigureStore';

let store = configureStore(appReducer);
let dummyProjects = [{updatedAt: '2017-06-07T01:23:40.000Z', title: 'test1'}];

it('renders correctly', () => {
  const tree = renderer.create(
    <Provider store={store}>
      <Home projects={dummyProjects}/>
    </Provider>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

• 本来はAPIにより取得するデータ projects を、テストにおいてダミーデータ(dummyProjects)にしようとしています。

###テスト対象のソースコード
テスト対象のソースコードは Home.js で、この実装は以下のようになっています。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  FlatList,
  View,
} 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;
    this.props.actions.getAllProjects();
  }

  render() {
    const props = this.props;
    console.log(props);

    return (
      <View>
        <FlatList style={styles.list}
          data={props.projects}
          renderItem={({item}) => 
            <View style={styles.project}>
              <Text style={styles.projectName}>{item.title}</Text>
            </View>
          }
        />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  // ※ 省略
});

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

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

export default connect(mapStateToProps, mapDispatchToProps)(Home)

• projectsの内容を表示するComponentです。projectsを取得する処理はactions.getAllProjects()に記述しています。（ここでは詳細割愛します）
• stateの変更を反映するmapStateToPropsメソッドを定義し、これらのメソッドをconnectしたものをexportしています。

###結果
期待するダミーデータ（先述のdummyProjects）では置き換えられませんでした。
Home.js でrender直前にpropsの内容を出力した結果は以下のように空になります。

{ projects: [],
  actions: { getAllProjects: [Function]} }

Snapshotを作成しても、以下のようにデータが空の状態になってしまいます。

<View>
  <RCTScrollView
    data={Array []}
---(以下省略)---

「テストコード」の部分で書いているとおり、APIで取得するデータ projects を、テストにおいてダミーデータに置き換えたいです。
何か方法をご存知の方がいらっしゃいましたらご回答よろしくお願いいたします。

Answer 1

redux を使わずに Home コンポーネントにそのままダミーデータを流し込むやり方はいかがでしょうか ?

it('renders correctly', () => {
  const dummyProjects = {
    // dummy data
  };
  const tree = renderer.create(
    <Home projects={dummyProjects}/>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

Comments

[sentomo]

`Home` コンポーネントにそのままダミーデータを渡すと、以下のようなエラーが出ます。

Invariant Violation: Could not find "store" in either the context or props of "Connect(Home)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Home)".

本体コードでは、 `Home` コンポーネントが呼び出される前のコンポーネントで、<Provider>でラップしているからだと思います。
そうなると、テストをするためには本体コードをRedux使用せずに書き直すしかないのでしょうか？

[januswel]

そうですね
`Home` コンポーネントの定義と、 `connect` を別にしたほうがテストしやすいかと思います

[sentomo]

ご回答ありがとうございます！
以下の質問も合わせて読ませていただき、componentとcontainerの定義が曖昧になっていることに気がつきました。
https://teratail.com/questions/36725

まずは `Home` コンポーネントから `connect` を切り離すことを検討します。

[hishida]

ご回答ありがとうございました。
テストしやすい構成になっていることもひとつの原因としてありそうですね。
構成の検討も合わせてやってみます。
ありがとうございました！

[hishida]

以前ご回答いただいていたように、reduxとは切り分けてHomeをコンポーネント化することで、ダミーデータを渡してSnapshotテストをすることができるようになりました。
結果報告が大変遅くなってしまいました。
ご教示いただきありがとうございました！ > @januswel さん