基于反应路由器的应用测试

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（）工作。