Как проверить ссылки реактивного маршрутизатора с помощью Enzyme?

Я вижу довольно много похожих вопросов, но все они кажутся сильно устаревшими или невероятно запутанными.

У меня есть компонент React, который содержит компонент React Router Link, например:

export default class Home extends Component {                                      
  render() {                                                                       
    return (                                                                       
      <div className="Home">  
        <Link to="/mission">Begin</Link>                                           
      </div>                                              
    );                                                                             
  }                                                                                
}

Затем я пытаюсь очень просто проверить, что компонент Home содержит компонент Link, который имеет свойство to=/mission, используя Jest. Итак, согласно Testing React Документация по маршрутизатору, я перепробовал множество вариантов тестов, но этот код наиболее кратко демонстрирует, чего я пытаюсь достичь (в примере используется jest-фермент для краткости):

it('includes link to Mission scene', () => {                                       
  const home = shallow(<MemoryRouter><Home /></MemoryRouter>);                                                              
  expect(home).toContainReact(<Link to="/mission">Begin</Link>)                    
});

Очевидно, что в этом коде есть несколько проблем, не последней из которых является ошибка:

Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.

Но обратите внимание на ключевые моменты: я хочу неглубоко визуализировать (если возможно) компонент Home, чтобы протестировать этот компонент изолированно. В то же время я пытаюсь обернуть это в MemoryRouter или каким-то образом получить контекст, чтобы я мог протестировать Link компоненты.

Проницательные потенциальные респонденты заметят, что эта проблема фактически предотвращает все изолированные тесты этого компонента (а не только тесты, связанные с React Router), потому что я вообще не могу выполнить поверхностный рендеринг компонента.


reactjs unit-testing testing react-router enzyme
person fildred13    schedule 06.08.2017    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Вы можете использовать метод find от Enzyme:

import { Link } from 'react-router';

it('includes link to Mission scene', () => {                                       
  const wrapper = shallow(<MemoryRouter><Home /></MemoryRouter>);
  expect(wrapper.find(Link).props().to).toBe('/mission');
 });
person Emre Sonmez    schedule 10.10.2017
comment
Мне нужно вернуться к этому коду, чтобы проверить этот ответ, но мое чутье говорит, что это не сработает. Я считаю, что ошибка возникла во время неглубокой визуализации, а не во время ожидания. - person fildred13; 11.10.2017
comment
Это не может работать даже с теоретической точки зрения просто потому, что shallow отображает только самый внешний компонент (в данном случае ‹MemoryRouter›), а компонент ‹Link› никогда не подвергается воздействию метода .find (). Либо используйте mount () вместо shallow, либо что-то вроде .dive (). - person user966041; 31.08.2018
comment
Я получаю следующую ошибку, когда пытался ответить выше: ReferenceError: MemoryRouter не определен - person sriram hegde; 20.01.2019
comment
какой импорт мне не хватает? - person sriram hegde; 20.01.2019

arrow_upward
3
arrow_downward

Это информация из официальных документов:

Если вы попытаетесь выполнить модульное тестирование одного из ваших компонентов, который отображает <Link>, <Route> и т. Д., Вы получите несколько ошибок и предупреждений о контексте. Хотя у вас может возникнуть соблазн самостоятельно заглушить контекст маршрутизатора, мы рекомендуем вам заключить свой модульный тест в <StaticRouter> или <MemoryRouter>.

Эта ссылка может быть вам полезна.

person Yevhenii Herasymchuk    schedule 07.06.2018

arrow_upward
1
arrow_downward

вы можете запросить, просто вставив имя компонента в виде строки, как любой обычный элемент html

it('includes link to Mission scene', function() {
    const wrapper = shallow(<MemoryRouter><Home /></MemoryRouter>);
    expect(wrapper.find('Link').prop('to')).to.be.equal('/mission');
});
person Ahmed Salah    schedule 20.09.2018

arrow_upward
-2
arrow_downward

попробуйте <MemoryRouter><Route><Home /></Route></MemoryRouter>

person Libin Lu    schedule 15.08.2018