反応ルータの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 LoginPage from './LoginPage'; 

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

export default MainPage; 

はここに私のルートファイルです：

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 {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); 
    } 

    }); 

ではなく、単にコンテキストにあるとして、それを渡すの主な解決策であるように思われました。私は確信していませんなぜこれは動作しますが、それはありません。私は今それと一緒にロールバックしますが、私は学ぶことができるようにいくつかの説明を聞くのが大好きです。