基於反應路由器的應用測試

Question

我的應用使用react-router來管理用戶導航，現在我需要添加單元測試埠我被困在如何改變路由。

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

我怎樣才能改變路線，這樣會與現有子。

Answer 1

這是怎麼了，你可以僞裝你的測試路線：

有一個叫history，您可以使用在測試中創建一個假的瀏覽器歷史記錄模塊。爲了應用它，你需要讓你的路由器的參數在它使用的歷史，就像這樣：

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中運行這些測試，那麼您需要使用jsdom以使酶的mount（）工作。