Javascript 反应笑话-您不应该使用<；链接>；a<；路由器>；

我有一个超级简单的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')
);

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“react Router dom”导入{BrowserRouter as Router}；
从“react apollo”导入{ApolloProvider}；
从“/utils/client”导入客户端；
ReactDOM.render(
,
document.getElementById（'root'））
);

App.tsx

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

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

export default App;

从“React”导入React；
从“/Main”导入Main；
函数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;

从“React”导入React；
从“react router dom”导入{Switch，Route，Link}；
从“/Home”导入主页；
常量Main:React.FC=（）=>{
返回(
);
};
导出默认主；

Home.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;    

import React，{useContext}来自“React”；
从“react router dom”导入{Link}；
常量Home:React.FC=（）=>{
返回(
家
谷歌
);
};
导出默认主页；

我有一个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
});

从“React”导入React；
从'@testing library/react'导入{render，screen}；
从“./App”导入应用程序；
测试（'呈现学习反应链接'，（）=>{
render（）；
期望（正确）。托贝特鲁斯
});

如果我使用

纱线测试运行测试

我得到一个错误：

不变量失败：不应在

外部使用

我的链接在

Home.tsc

中，它被

index.tsx中的
包围

我在这里工作

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

只有在运行测试时才会出现此错误。下面有两种解决方案，第一种是将
组件添加到测试用例中。第二个选项是从
切换到简单的

选项1:

您还可以将
组件添加到测试中，这样它就不会丢失，因为：

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

  expect(true).toBeTruthy
});

test（'renders learn react link'，（）=>{
渲染(

最后，您可以保留原始测试用例。
显示创建此警告的测试文件。也许测试文件会创建一些链接？
<Link to='http://google.com'> Google</Link>

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