无法让MemoryRouter与@testing-library/react一起工作
无法让MemoryRouter与@testing-library/react一起工作
提问于 2020-01-24 15:45:14
我正在尝试测试我的路由器是否按预期工作。但是我不能让路由器指向/以外的其他位置
以下是我的简化测试代码。
App.tsx
import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';
const App: React.FC = () => {
return (
<div>
<BrowserRouter>
<Switch>
<Route path={'/test'}>test</Route>
<Route path={'/'}>index</Route>
</Switch>
</BrowserRouter>
</div>
);
};
export default App;App.test.tsx
import React from 'react';
import App from './App';
import {MemoryRouter} from 'react-router-dom';
import {render} from '@testing-library/react';
test('renders /test route', async () => {
const app = render(
<MemoryRouter initialEntries={['/test']} initialIndex={0}>
<App/>
</MemoryRouter>);
expect(app.getByText(/test/i)).toBeInTheDocument();
});我收到以下错误消息
Error: Unable to find an element with the text: /test/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<div>
index
</div>
</div>
</body>我做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-24 19:18:21
问题是，我想测试的组件已经声明了一个路由器。为了解决这个问题，我不得不将App组件拆分为App和Routes。
为了进行测试，我只需呈现Routes组件，一切都如预期的那样工作。
App.tsx
import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';
export const Routes = () => {
return (
<>
<Switch>
<Route path={'/test'}> test</Route>
<Route path={'/'}> index</Route>
</Switch>
</>
)
};
const App: React.FC = () => {
return (
<div>
<BrowserRouter>
<Routes/>
</BrowserRouter>
</div>
);
};
export default App;App.test.tsx
import React from 'react';
import {Routes} from './App';
import {MemoryRouter} from 'react-router-dom';
import {render} from '@testing-library/react';
test('renders routes correct', async () => {
const app = render(
<MemoryRouter initialEntries={['/test']} initialIndex={0}>
<Routes/>
</MemoryRouter>
);
expect(app.getByText(/test/i)).toBeInTheDocument();
});Stack Overflow用户
发布于 2020-12-12 05:58:08
如果您正在从index.js加载App，当我在Create React应用程序上遇到此问题时就是这种情况，您也可以将App包装在Router中，然后按照您的预期测试App路由，而不必像您所做的那样导出Routes。
例如(否则为库存CRA index.js)：
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './app';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59892304
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号