React - 测试 - 你不应该在 <Router> 之外使用 <Link>答案

【问题标题】：React - test - You should not use <Link> outside a <Router>React - 测试 - 你不应该在 <Router> 之外使用 <Link>
【发布时间】：2020-10-31 23:13:20
【问题描述】：

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

我在 Post 内使用 <Link ...，该 Post 在主应用程序中被调用

App 本身使用 Router 是这样的：

  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} /> }
              ...

所以我在路由器树中。如何让测试也能做到这一点？

【问题讨论】：

这能回答你的问题吗？ You should not use <Link> outside a <Router>
但是PostList在单独测试时并没有呈现在APP树中，它只是呈现在div中。您需要在测试中将其包装在路由器中。

标签： javascript reactjs react-router jestjs

【解决方案1】：

将元素包装在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>');
});

【讨论】：