###前提・実現したいこと
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 参照)
あなたの回答
tips
プレビュー