Проверьте, отображается ли компонент для определенного маршрута - PullRequest
Новая
       29

Проверьте, отображается ли компонент для определенного маршрута

0 голосов
/ 01 октября 2019

У меня есть такой компонент: 

const App = () =>
    <BrowserRouter basename={basePath}>
        <div>
            <Header/>
            <Switch>
                <Route path="/" exact component={Dashboard}/>
                <Route path="/contact" component={ContactForm}/>
                <Route path="*" component={Dashboard} />
            </Switch>
        </div>
    </BrowserRouter>;

И в моем тесте я хочу проверить, что для маршрута "/ contact" приложение действительно отобразит компонент ContactForm. Как я могу это сделать?

Если я попытаюсь: 

const wrapper = mount(
   <MemoryRouter initialEntries={[ '/contact' ]}>
      <App/>
   </MemoryRouter>
);

Но таким образом, оболочка также отображает Dashboard, поэтому expect(wrapper.find(ContactForm)).toHaveLength(1); не проходит.

Как мне проверить это? правильно?

ОБНОВЛЕНИЕ

Вот как я сейчас проверяю это: 

    const wrapper = mount(
        <MemoryRouter initialEntries={[ '/' ]}>
            <App/>
        </MemoryRouter>
    );
    wrapper.find("nav").find(Link).simulate("click", { button: 0 });
    expect(wrapper.find(ContactForm)).toHaveLength(1);

Так что я должен начать с '/'маршрут, а затем имитировать щелчок по ссылке, и тогда он работает.

1 Ответ

0 голосов
/ 01 октября 2019

<MemoryRouter initialEntries={[ '/contact' ]}>

Это должно хорошо работать ... проверьте, какое значение имеет props.location в компоненте приложения. Может быть, BrowserRouter меняет местоположение

...