반응 라우터 v4 라우팅과 redux 연결 구성 요소 테스트

Question

내 경로가 제대로 설정되었는지 확인하려고합니다. 특정 URI가있는 경우와 마찬가지로 적절한 구성 요소가로드됩니다. 우연히 경로를 잘못 입력하는 것을 막기 위해서.

import React from 'react'; 
import {connect} from 'react-redux'; 

export const ConnectPage = (props) => { 
    return <div>{props.code}</div>; 
}; 

export default connect(
    (state) => ({}), 
    (dispatch) => ({}) 
)(ConnectPage); 

메인 페이지 :

import React from 'react'; 
import {Route, Switch, Redirect} from 'react-router-dom'; 
import qs from 'query-string'; 

import MainPage from './MainPage'; 
import ConnectPage from './ConnectPage'; 

class Routes extends React.Component { 

    render() { 
    return (<Switch> 
     <Route path={'/connect/:provider'} render={(matches) => { 
     const search = qs.parse(matches.location.search); 

     if (search.code) { 
      return <ConnectPage code={search.code}/>; 
     } 

     return <Redirect to={'/'}/>; 

     }}/> 
     <Route exact path={'/'} component={MainPage}/> 
    </Switch> 
    ); 
    } 
} 

export default Routes; 

을 그리고 여기에 내가 가진 문제에 봉착 내 테스트입니다 :

여기

import React from 'react'; 
import LoginPage from './LoginPage'; 

const MainPage =() => (
    <LoginPage/> 
); 

export default MainPage; 

내 경로가 파일을 있어요 여기에

은 샘플 연결 페이지의 :

import React from 'react'; 
import {mount} from 'enzyme'; 
import {MemoryRouter} from 'react-router'; 
import configureStore from 'redux-mock-store'; 
import Chance from 'chance'; 

import Routes from './Routes'; 

import MainPage from './MainPage'; 
import ConnectPage from './ConnectPage'; 
import {createProvider as Provider} from 'react-redux'; 

const chance = new Chance(); 

const middlewares = []; 
let mockStore; 

describe('The Routes',() => { 

    beforeAll(()=>{ 
    mockStore = configureStore(middlewares); 
    }); 

    it('loads the Main Page on /',() => { 
    const component = mount(
     <MemoryRouter initialEntries={['/']} initialIndex={0}> 
     <Routes store={mockStore}/> 
     </MemoryRouter> 

    ); 
    expect(component.find(MainPage).length).toBe(1); 

    }); 

    it('redirects to the main page if no code',() => { 
    const url = '/connect/someprovider'; 

    const component = mount(
     <MemoryRouter initialEntries={[url]} initialIndex={0}> 
     <Routes/> 
     </MemoryRouter> 
    ); 

    expect(component.find(MainPage).length).toBe(1); 

    }); 

    it('loads the Connect Page on /connect/provider',() => { 
    const code = chance.word({length: 32}); 
    const url = `/connect/provider?code=${code}`; 

    const component = mount(
     <Provider store={mockStore}> 
     <MemoryRouter initialEntries={[url]} initialIndex={0}> 
      <Routes/> 
     </MemoryRouter> 
     </Provider>); 

    try { 
     expect(component.find(ConnectPage).length).toBe(1); 
    } catch (e) { 
     console.log('Used url:', url); 
     throw (e); 
    } 

    }); 

}); 

3 번째 테스트 패스를 만드는 방법을 이해할 수 없다. 나는 ConnectedPage가 적절할 때 적절한 위치에 놓 이도록하고 싶을뿐입니다. 이 상태에서

, 내가 얻을 :

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 
     in createProvider (created by WrapperComponent) 
     in WrapperComponent 

Answer 1

나는 그 동안 대답을 발견했다, 그래서 나는 번영 여기에 게시합니다. 더 잘 아는 분이라면 알려주세요! mockStore 대신 맥락에서와 같이 그냥 통과의 주요 솔루션이 될 것 같았다 호출

it('loads the Connect Page on /connect/provider',() => { 
    const code = chance.word({length: 32}); 
    const url = `/connect/provider?code=${code}`; 

    const component = mount(
     <MemoryRouter initialEntries={[url]} initialIndex={0}> 
     <Routes/> 
     </MemoryRouter>, 
     { 
     context: { 
      store: mockStore() 
     }, 
     childContextTypes: { 
      store: PropTypes.object.isRequired 
     } 
     }); 

    try { 
     expect(component.find(ConnectPage).length).toBe(1); 
    } catch (e) { 
     console.log('Used url:', url); 
     throw (e); 
    } 

    }); 

:

다음은 수정 된 테스트 케이스입니다. 확실하지 않아요 왜이 작동하지만 그것은 않습니다. 나는 지금 그걸 가지고 굴러 갈 것이지만, 내가 배울 수 있도록 몇 가지 설명을 듣고 싶다.