我正在将我的项目迁移到React 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()
1条答案
按热度按时间iezvtpos1#
Route
组件在element
属性上接受一个React.ReactNode
,即JSX。AllTheProviders
组件正在传递一个函数。将
children
属性(* 键入为ReactNode
*)直接传递给element
。因为它不是一个“儿童” prop ,我建议重命名为
element
,这样它代表的东西就更清楚了。