React Router V5迁移至V6：测试工具函数失效问题求助

我正在把项目迁移到React Router V6，但测试工具函数出了问题。运行测试时所有断言都失败，Jest找不到目标元素。有没有人遇到过类似的迁移问题或者知道原因？

提前感谢！

我的TestUtils文件 #

/* eslint-disable no-console */
import React, { ReactElement, ReactNode } from 'react'

import { render } from '@testing-library/react'
import { I18nextProvider } from 'react-i18next'
import { QueryClientProvider, setLogger, QueryClient } from 'react-query'
import { Route, MemoryRouter, Routes } from 'react-router-dom'
import { ToastContainer } from 'react-toastify'
import { ThemeProvider } from 'styled-components'

import bo from '../../themes/bo'

import i18n from '../../../i18n'

import '@testing-library/jest-dom'

setLogger({
     log: () => console.log,
     warn: () => console.warn,
     error: () => {
        // do nothing
     }
})
const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retryDelay: 1,
            retry: 0
        }
    }
})

const AllTheProviders = ({ children, route, path }: { children?: ReactNode; route: 
string; path: string }) => {
    return (
       <I18nextProvider i18n={i18n}>
            <QueryClientProvider client={queryClient}>
                <MemoryRouter initialEntries={[route]}>
                    <ThemeProvider theme={bo}>
                        <ToastContainer />
                        <Routes>
                            <Route path={path} element={() => children} />
                        </Routes>
                    </ThemeProvider>
                </MemoryRouter>
            </QueryClientProvider>
        </I18nextProvider>
    )
}

const customRender = (ui: ReactElement, { route = '/', path = '/' }: { route?: 
string; path?: string } = {}) =>
    render(ui, { wrapper: (props) => <AllTheProviders {...props} route={route} path={path} /> })

export * from '@testing-library/react'
export { customRender as render }

测试示例 #

await expect(screen.findByTestId('Test#Element')).resolves.toHaveTextContent('test')
expect(screen.queryByTestId('Test#Element')).not.toBeInTheDocument()

问题原因及修复方案 #

核心问题出在AllTheProviders组件的Route配置上：

<Route path={path} element={() => children} />

React Router V6要求Route的element属性接收React元素，而不是返回元素的函数。当前写法会导致组件无法正确渲染，自然找不到测试目标。

修复方式：直接将children作为element的值传递，无需包裹成函数：

<Route path={path} element={<>{children}</>} />

如果children本身是单个元素，也可以直接写：

<Route path={path} element={children} />

另外要确认customRender传递的route和path是否匹配，确保路由能命中对应的Route规则，保证组件正常渲染。修改后重新运行测试即可解决问题。

内容的提问来源于stack exchange，提问作者Pedro135