тест на основе приложения на основе реакции-маршрутизатора

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

Как я могу изменить маршрут таким образом, что будет существующий ребенок.

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().