react-redux-router의 onEnter 테스트

Question

내 경로 컨테이너에 onEnter가 정의되어 있으며이를 위해 몇 가지 테스트를 작성하는 방법을 알아 내려고합니다.

export default class Root extends React.Component<IRootProps, void> { 
    store: Redux.Store<IAppState> = configureStore(); 
    history: ReactRouterReduxHistory = syncHistoryWithStore(hashHistory, this.store); 

    checkAuth = (nextState: RouterState, replace: RedirectFunction): void => { 
     console.log(this.store.getState().authToken); 
     if (nextState.location.pathname !== '/login') { 
      if (this.store.getState().authToken) { 
       if (nextState.location.state && nextState.location.pathname) { 
        replace(nextState.location.pathname); 
       } 
      } else { 
       replace('/login'); 
      } 
     } 
    } 

    render() { 
     return (
      <Provider store={this.store}> 
       <div> 
        <Router history={this.history}> 
         <Route path='/login' component={Login}/> 
         <Route onEnter={this.checkAuth} path='/' component={App}> 
          <IndexRoute component={Counter}/> 
         </Route> 
        </Router> 
        <DevTools /> 
       </div> 
      </Provider> 
     ); 
    } 
} 

구성 요소를 탑재하기위한 테스트를 작성하는 것은 충분히 쉬웠습니다.

function setup() { 
    const middlewares: any[] = []; 
    const mockStore = configureStore(middlewares); 
    const initialState = {}; 
    const store:any = mockStore(initialState); 

    const component = mount(<Root store={store as Store<IAppState>} />); 

    return { 
     component: component, 
     history: history 
    }; 
} 

describe('Root component',() => { 
    it('should create the root component',() => { 
     const {component, history} = setup(); 
     expect(component.exists()).toBeTruthy(); 
    }); 
}); 

는하지만 실제로 호출되는 checkAuth을 테스트하는 방법에 대한 손실에있어 실제로 제대로 replace 호출을 수행하는 (그리고 옳은 일을 렌더링).

나는 이것이 사소한 것이 확실하지만 Google은 지금까지 나를 실패하게 만듭니다. 어떤 예/포인터도 감사 할 것입니다.

Answer 1

onEnter 콜백을 사용하여 별도의 파일을 만들고 테스트 할 수 있습니다. 나는 그러한 파일을 guards라고 부르고있다.

export default (store: Redux.Store<IAppState>) => (nextState: RouterState, replace: RedirectFunction): void => { 
    if (nextState.location.pathname !== '/login') { 
     if (store.getState().authToken) { 
      if (nextState.location.state && nextState.location.pathname) { 
       replace(nextState.location.pathname); 
      } 
     } else { 
      replace('/login'); 
     } 
    } 
} 

및 경로 :

<Route onEnter={rootGuard(this.store)} path='/' component={App}> 

루트 가드는이 같은 예를 찾습니다