質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

0回答

2340閲覧

react-navigationによる画面遷移のテスト方法がわかりません

hishida

総合スコア11

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2017/08/03 04:36

編集2017/08/04 05:12

###前提・実現したいこと
ReactNativeでタブレットアプリを開発しています。
Home画面からProject画面に遷移するようなアプリです。
ルーティングのライブラリとしてreact-navigation(1.0.0-beta.11)を使用しています。

現在、テストを実装しようとしているのですが、
StackNavigatorで設定したページに遷移させるようなテストの方法が分からず困っています。
※ 後述のテストコードにやりたいことを記載しています。

何か方法をご存知の方がいらっしゃいましたらご回答よろしくお願いいたします。

###該当のソースコード

テストコード

tests/src/Actions.js :

lang

1import configureStore from '../../src/ConfigureStore'; 2import appReducer from '../../src/reducers/AppReducer'; 3let store = configureStore(appReducer); 4var actions = require('../../src/Actions'); 5import { NavigationActions } from 'react-navigation'; 6 7describe('Actionのテスト', () => { 8 it('Project画面に正しく遷移する', function() { 9 return store.dispatch(actions.getAllProjects()).then(() => { 10 expect(store.getState().nav.routes[0].routeName).toEqual('Home'); 11 12 // ※※ ここで"Project"に遷移させたい ※※ 13 // 試したがうまくいかなかった→ store.dispatch(NavigationActions.navigate('Project', { project: {title: "hoge"} })) 14 expect(store.getState().nav.routes[0].routeName).toEqual('Project'); 15 }); 16 }); 17})

Reducer

src/reducers/AppReducer.js :

lang

1import { combineReducers } from 'redux' 2import navigationReducer from './NavigationReducer'; 3import { getAllProjects } from './ProjectReducer'; 4 5const appReducer= combineReducers ({ 6 nav: navigationReducer, 7 getAllProjects, 8}); 9 10export default appReducer;

src/reducers/NavigationReducer.js :

lang

1import nav from '../Navigation'; 2 3const initialState = nav.router.getStateForAction(nav.router.getActionForPathAndParams('Home')); 4 5export default (state = initialState, action) => { 6 const nextState = nav.router.getStateForAction(action, state); 7 8 return nextState || state; 9};

src/reducers/ProjectReducer.js :

lang

1import { REQUEST_POSTS, RECEIVE_POSTS } from '../Actions' 2 3const initialState = { 4 type: REQUEST_POSTS, 5 projects: [], 6}; 7 8export function getAllProjects(state = initialState, action) { 9 switch (action.type) { 10 case RECEIVE_POSTS: 11 return Object.assign({}, state, { 12 type: action.type, 13 projects: action.data, 14 }); 15 default: 16 return state; 17 } 18}

Action

src/Actions.js :

lang

1import { config } from './config/config'; 2 3/* 4 * action types 5 */ 6export const REQUEST_POSTS = 'REQUEST_POSTS' 7export const RECEIVE_POSTS = 'RECEIVE_POSTS' 8 9/* 10 * action creators 11 */ 12function requestPosts() { 13 return { 14 type: REQUEST_POSTS 15 } 16} 17 18function receivePosts(json) { 19 return { 20 type: RECEIVE_POSTS, 21 data: json, 22 } 23} 24 25export function getAllProjects() { 26 return dispatch => { 27 dispatch(requestPosts()); 28 return fetch(`${config.API_URL}/projects`) 29 .then(req => req.json()) 30 .then(json => { 31 console.log(json); 32 dispatch(receivePosts(json)); 33 }) 34 } 35}

Navigation

src/Navigation.js :

lang

1import { 2 StackNavigator 3} from 'react-navigation'; 4import Home from './components/Home'; 5import Project from './components/Project'; 6 7export default StackNavigator({ 8 Home: { 9 screen: Home, 10 navigationOptions: { 11 title: 'ホーム', 12 } 13 }, 14 Project: { 15 screen: Project, 16 navigationOptions: { 17 title: 'プロジェクト', 18 } 19 }, 20})

Store

src/ConfigureStore.js :

lang

1import { createStore, applyMiddleware } from 'redux' 2import thunkMiddleware from 'redux-thunk' 3import { createLogger } from 'redux-logger' 4import appReducer from './reducers/AppReducer' 5 6const loggerMiddleware = createLogger() 7 8const createStoreWithMiddleware = applyMiddleware( 9 thunkMiddleware, 10 loggerMiddleware 11)(createStore) 12 13export default function configureStore() { 14 return createStoreWithMiddleware(appReducer) 15}

###試したこと

  • NavigationActions.navigateメソッドをテストコード中で呼び出してみましたが、その直後にstateを確認しても変化がありませんでした。(tests/src/Actions.js 参照)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問