时间戳

首页 > 解决方案 > React - 测试 - 你不应该在外部使用

javascript - React - 测试 - 你不应该在外部使用

问题描述

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

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

标签： javascriptreactjsreact-routerjestjs

解决方案

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

推荐阅读