Question

我有一个超级简单的react app，像这样。

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')
);

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

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;

我有一个带有虚拟测试的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

进行测试

我得到一个错误：

不变式失败：您不应该在<Link>之外使用<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>组件更改为简单的定位标记，因为它会根据以下代码创建相同的最终结果：

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

针对<Home>组件中的以下内容：

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

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

反应开玩笑-您不应在<Router>外使用<Link>

1 个答案: