反応ルータv4でマウントされたコンポーネントをテストする

Question

私はアプリケーションをreact-router@4.xに移行しています。enzymeのmount機能を使用しているテストを取得することに問題があります。

withRouter-wrapされたサブコンポーネントを持つコンポーネントをマウントするたびに問題が発生します。

class SomePage extends React.Component { 
    componentDidMount() { 
    this.props.getData(); 
    } 
    render() { 
    return (
     <div> 
     <ComponentWrappedInWithRouter /> 
     </div> 
    ); 
    } 
} 

const Component = (props) => (
    <button onClick={() => this.props.history.push('/new-route') }> 
    Click to navigate 
    </button> 
); 

const ComponentWrappedInWithRouter = withRouter(Component); 

は今、私はそれが取り付けられていた後にその小道具getDataを呼び出すSomePageそれをテストしたい：

は、ここで私がテストだよ何の簡素化状況の例です。愚かな例、私は知っているが、構造は十分でなければならない。

私はenzymeさんmountを使用してテストを書くたびに、私は次のエラーを取得する：

TypeError: Cannot read property 'route' of undefined 
    at Route.computeMatch (node_modules/react-router/Route.js:68:22) 
    at new Route (node_modules/react-router/Route.js:47:20) 

今、私は私にはないコンポーネントのwithRouterを呼び出そうとするのでこれが起こる理由はあると思います文脈上にrouterがあります。つまり、<BrowserRouter />またはその兄弟の1つにラップされていません。

これはreact-router@3.xの問題ではありませんでしたが、現在のメジャーは完全な書き換えであったため、これらの問題が発生することを完全に理解しています。

どのように私はこれを修正することができますか？

Answer 1

かなり簡単です：MemoryRouterでテスト中のコンポーネントをラップして、react-router-domからあなたはいいですね。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md