React - test - не используйте <Link>вне <Router> - PullRequest
Новая
       55

React - test - не используйте <Link>вне <Router>

0 голосов
/ 11 июля 2020 
Invariant failed: You should not use <Link> outside a <Router>

Получение этого при попытке написать тест для компонента с 

test("renders post list div ", () => {
  const posts = [ {
    created: '-',
    title: '-',
    slug : '-',
    content : '-',
    author : '-' } ];
  const div = document.createElement('div');
  ReactDOM.render(<PostList posts = {posts} />, div);
  expect(div.querySelector("div")).toBeTruthy();
});

Я использую <Link ... внутри Post, который вызывается в основном приложении

Само приложение использует маршрутизатор следующим образом: 

  return (
    <ThemeContext.Provider value={theme} >
      <Router>
        <div className="App" style={{ paddingLeft: "10px" }}>
          <Header text='Welcome' />
          <PostMessage type={postMessage} setPostMessage={setPostMessage} />
          <ChangeTheme theme={theme} setTheme={setTheme} />
          <UserBar
            username={username} setUsername={setUsername}
            loggedIn={loggedIn}
            onLogin={handleLogin} />
          <br />
          <hr />
          <Switch>
            <Route exact path='/'
              ...
              {loggedIn && <PostList posts={posts} /> }
              ...

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

1 Ответ

1 голос
/ 11 июля 2020

Обертывание элемента в Router и Route сработало: 

...
import { BrowserRouter as Router, Route } from 'react-router-dom';
...


test("renders post list div ", () => {
  const posts = [ {
    created: '-',
    title: '-',
    slug : '-',
    content : '-',
    author : '-' } ];
  const div = document.createElement("div" );
  div.setAttribute('id', 'root' );
  ReactDOM.render
    (<Router><Route path='/'><PostList posts = {posts} /></Route></Router>, div);
  expect(div.querySelectorAll("div.post")[0].innerHTML).toContain('Written by <b>-</b>');
});
...