个人中心
gpt4 book ai didi

reactjs - 无法让 MemoryRouter 与 @testing-library/react 一起工作

转载 作者：行者123 更新时间：2023-12-03 14:08:14 26 4
gpt4 key购买 nike

我正在尝试测试我的路由器是否按预期工作。但是我无法让路由器指向除 / 之外的其他位置

这是我的简化测试代码。
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>

我究竟做错了什么？

最佳答案

问题是，我想测试的组件已经声明了一个路由器。
为了解决这个问题，我不得不拆分 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();
});

关于reactjs - 无法让 MemoryRouter 与 @testing-library/react 一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59892304/

26 4 0
文章推荐： reactive-programming - 如何编写带有动态 throttle 的供应？
文章推荐： google-sheets - 为什么将多行文本从 Google Sheets 复制到 Instagram 标题框会在文本的开头和结尾添加引号？
文章推荐： Terraform - 将类型对象作为参数传递给 Azure 模板部署
文章推荐： python - 在python中创建一个按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com