反応ルータベースのアプリケーションテスト

Question

私のアプリケーションでは、ユーザーのナビゲーションを管理するために反応ルータを使用していますが、今はルートを変更する方法に固執しています。

マイ<App />（簡体）です：

class AppUser extends Component { 
    render() { 
     return (
      <div className="layout"> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

class Initial extends Component { 
    render() { 
     return (
      <div className="initial" /> 
     ); 
    } 
} 

export default class App extends Component { 
    render() { 
     let masterPageBase = (props) => (
      <AppUser> 
       {props.children} 
      </AppUser> 
     ); 

     let notFound =() => (
      <div> 
       <h1>Not found!</h1> 
      </div> 
     ); 

     <Router history={browserHistory}> 
      <Route path="/" component={masterPageBase}> 
       <IndexRoute component={Initial} /> 
       <Route path="*" component={notFound} /> 
      </Route> 
     </Router> 
    } 
} 

そして、私のテストは次のとおりです。

describe('<App />',() => { 
    it('user',() => { 
     const wrapper = shallow(<App />); 

     // FIXME This fails 
     expect(wrapper.find('AppUser').length).toEqual(1); 
    }); 
}); 

それは既存の子になりますので、どのようにルートを変更することができます。あなたのテストで偽のブラウザの履歴を作成するために使用できるhistoryと呼ばれるモジュールがあり

：

Answer 1

これはどのようにすることができますあなたのテストで偽のルートです。あなたのテストでは

export default class App extends Component { 
    render() { 
     createRouter(browserHistory); 
    } 
} 

export function createRouter(history) { 
    let masterPageBase = (props) => (
     <AppUser> 
      {props.children} 
     </AppUser> 
    ); 

    let notFound =() => (
     <div> 
      <h1>Not found!</h1> 
     </div> 
    ); 

    return <Router history={history}> 
     <Route path="/" component={masterPageBase}> 
      <IndexRoute component={Initial} /> 
      <Route path="*" component={notFound} /> 
     </Route> 
    </Router> 
} 

、あなたはその後、偽の歴史を作成するために、履歴モジュールを使用することができます：

import { useRouterHistory } from "react-router"; 
import createMemoryHistory from "history/lib/createMemoryHistory"; 

function navigatingTo(path) { 
    return mount(createRouter(useRouterHistory(createMemoryHistory)(path))); 
} 

describe('Router',() => { 
    it('user',() => { 

     expect(navigatingTo("/").find('AppUser').length).toEqual(1); 
    }); 
}); 

それを適用するためには、あなたはこのように、それは使用しています歴史の中で、ルーターのパラメトリックを作成する必要があります

PS：これらのテストをnode.jsで実行する場合は、酵素のmount（）が動作するためにjsdomを使用する必要があります。