javascript - React jest - 你不应该在 <Router> 之外使用 <Link>

Question

我有一个 super 简单的 react 应用程序，就像这样。

• index.tsx
• App.tsx
• Main.tsx
• Home.tsx

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { BrowserRouter as Router } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import client from "./utils/client";

ReactDOM.render(
  <Router>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Router>,
  document.getElementById('root')
);

应用程序.tsx

import React from 'react';
import Main from "./Main";

function App() {
  return (
    <Main />
  );
}

export default App;

Main.tsx

import React from 'react';
import { Switch, Route, Link } from "react-router-dom";

import Home from "./Home";

const Main:React.FC = () => {
    return (
        <div>
            <Switch>
                <Route exact path='/' component={Home} />
            </Switch>
        </div>
    );
};

export default Main;

首页.tsx

import React, {useContext} from 'react';

import { Link } from "react-router-dom";

const Home:React.FC = () => {

    return (
        <div>
            <h1>Home</h1>

            <Link to='http://google.com'> Google</Link>

        </div>
    );
};

export default Home;    

我有一个带有虚拟测试的 App.test.tsx 来运行它。

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  expect(true).toBeTruthy
});

如果我使用 yarn test 运行测试

我收到错误:

Invariant failed: You should not use <Link> outside a <Router>

我的链接位于 Home.tsc其周围是 <Router>在index.tsx

我在这里做一些工作。

应用程序运行时没有任何错误。

此错误仅在我运行测试时出现

Answer 1

解决办法有以下两种，第一种是添加<Router>组件到您的测试用例中。第二个选项是从 <Link> 切换一个简单的anchor tag .

选项 1:

您可以添加<Router>组件也添加到您的测试中，因此它不会丢失:

test('renders learn react link', () => {
  render(<Router>
    <App />
  </Router>);

  expect(true).toBeTruthy
});

选项 2:

您也可以从 <Link> 进行更改组件到一个简单的 anchor 标记，因为它根据您的代码创建相同的最终结果:

<Link to='http://google.com'> Google</Link>

至 <Home> 中的以下内容组件:

<a href="http://google.com">Google</a>

最后您可以保留原始测试用例。