Инвариант не удался: вы не должны использовать <Link>вне <Router>

Question

Я получаю ошибку в моем тесте:

Не удалось выполнить инвариант: вы не должны использовать <Link> вне <Router>

Что я могу сделать с это?

      483 |     state,
      484 |   }) => { 
    > 485 |     const component = mount(<Testrun  {...props} />);
          |                       ^
      486 |     return component;
      487 |   };
      488 |   it('should have an input for the username', function () {

Answer 1

В реальном проекте ваш <Testrun> вложен в какого-то родителя, который также обернут в некоторого родителя, и у некоторых из этих родителей также есть <BrowserRouter> или <HashRouter>. Они предоставляют контекст (я имею в виду Context API в React здесь), который необходим для <Link>.

Так что в тесте вам понадобятся некоторые версии маршрутизатора. Это будет так же просто, как

const component = mount(<MemoryRouter><Testrun  {...props} /></MemoryRouter>);

. Вы можете использовать любой другой маршрутизатор, но MemoryRouter особенно полезен в тестах, поскольку его легко настраивать и контролировать.

Answer 2

Должен быть компонент, который был применен за пределами компонента. Следовательно, вы получаете ошибку ниже: Не удалось выполнить инвариант: вы не должны использовать снаружи.

Переместите компонент внутри компонента.

Answer 3

Вы должны создать тег Link внутри дочерних элементов Router