###前提・実現したいこと
ReactNativeでアプリを開発しています。
アーキテクチャはreduxを採用しています。
現在、Snapshotテストを作成しようとしているのですが、Componentのpropsをダミーデータに置き換えるテストの方法がよくわかりません。
###テストコード
テストコードは以下のようにしています。
js
1import 'react-native'; 2import React from 'react'; 3import Home from '../src/components/Home.js'; 4import { Provider } from 'react-redux'; 5import renderer from 'react-test-renderer'; 6import appReducer from '../src/reducers/AppReducer'; 7import configureStore from '../src/ConfigureStore'; 8 9let store = configureStore(appReducer); 10let dummyProjects = [{updatedAt: '2017-06-07T01:23:40.000Z', title: 'test1'}]; 11 12it('renders correctly', () => { 13 const tree = renderer.create( 14 <Provider store={store}> 15 <Home projects={dummyProjects}/> 16 </Provider> 17 ).toJSON(); 18 expect(tree).toMatchSnapshot(); 19});
- 本来はAPIにより取得するデータ
projects
を、テストにおいてダミーデータ(dummyProjects
)にしようとしています。
###テスト対象のソースコード
テスト対象のソースコードは Home.js で、この実装は以下のようになっています。
js
1import React, { Component } from 'react'; 2import { 3 AppRegistry, 4 StyleSheet, 5 Text, 6 FlatList, 7 View, 8} from 'react-native'; 9import { connect } from 'react-redux'; 10import { bindActionCreators } from 'redux'; 11import * as actions from '../Actions'; 12import 'fetch-everywhere'; 13 14class Home extends Component { 15 constructor(props) { 16 super(props); 17 this.state = { 18 projects: [], 19 }; 20 } 21 22 componentWillMount = (props) => { 23 const { dispatch } = this.props; 24 this.props.actions.getAllProjects(); 25 } 26 27 render() { 28 const props = this.props; 29 console.log(props); 30 31 return ( 32 <View> 33 <FlatList style={styles.list} 34 data={props.projects} 35 renderItem={({item}) => 36 <View style={styles.project}> 37 <Text style={styles.projectName}>{item.title}</Text> 38 </View> 39 } 40 /> 41 </View> 42 ); 43 } 44}; 45 46const styles = StyleSheet.create({ 47 // ※ 省略 48}); 49 50const mapStateToProps = (state) => { 51 return { 52 projects: state.getAllProjects.projects, 53 } 54} 55 56const mapDispatchToProps = (dispatch) => { 57 return { 58 actions: bindActionCreators(actions, dispatch) 59 } 60} 61 62export 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
を、テストにおいてダミーデータに置き換えたいです。
何か方法をご存知の方がいらっしゃいましたらご回答よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/24 06:13
2017/08/24 09:01
2017/08/25 03:06
2017/09/01 03:55
2017/11/10 08:35