PIPIONE
2023-06-15 09:46:18
我有一個(gè)像這樣的超級簡單的反應(yīng)應(yīng)用程序。索引.tsx應(yīng)用程序.tsx主要.tsx主頁.tsx索引.tsximport 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'));應(yīng)用程序.tsximport React from 'react';import Main from "./Main";function App() { return ( <Main /> );}export default App;主要.tsximport 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;主頁.tsximport 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; 我有一個(gè)帶有虛擬測試的 App.test.tsx 來運(yùn)行它。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我得到一個(gè)錯(cuò)誤:不變失?。耗悴粦?yīng)該<Link>在 a 之外使用<Router>我擁有的鏈接被Home.tsc包圍<Router>在index.tsx我在這里做點(diǎn)事。該應(yīng)用程序運(yùn)行沒有任何錯(cuò)誤。此錯(cuò)誤僅在我運(yùn)行測試時(shí)出現(xiàn)
1 回答

揚(yáng)帆大魚
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊
下面有兩種解決方案,第一種是將<Router>
組件添加到您的測試用例中。第二個(gè)選項(xiàng)是從 切換<Link>
到一個(gè)簡單的錨標(biāo)記。
選項(xiàng)1:
您<Router>
也可以將組件添加到您的測試中,這樣它就不會(huì)丟失:
test('renders learn react link', () => {
? render(<Router>
? ? <App />
? </Router>);
? expect(true).toBeTruthy
});
選項(xiàng) 2:
您也可以從組件更改<Link>為簡單的錨標(biāo)記,因?yàn)樗鼤?huì)根據(jù)您的代碼創(chuàng)建相同的最終結(jié)果:
<Link to='http://google.com'> Google</Link>
組件中的以下內(nèi)容<Home>:
<a >Google</a>
然后最后你可以保留你原來的測試用例。
添加回答
舉報(bào)
0/150
提交
取消