typescript 将我的测试实用程序从React Router V5迁移到V6

0lvr5msh  于 2023-01-10  发布在  TypeScript
关注(0)|答案(1)|浏览(93)

我正在将我的项目迁移到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()
iezvtpos

iezvtpos1#

Route组件在element属性上接受一个React.ReactNode,即JSX。AllTheProviders组件正在传递一个函数。
children属性(* 键入为ReactNode*)直接传递给element

interface AllTheProvidersProps {
  children?: ReactNode;
  route: string;
  path: string
}

const AllTheProviders = ({ children, route, path }: AllTheProvidersProps) => {
  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>
  );
};

因为它不是一个“儿童” prop ,我建议重命名为element,这样它代表的东西就更清楚了。

interface AllTheProvidersProps {
  element?: ReactNode;
  initialEntries: string[];
  path: string
}

const AllTheProviders = ({ element, initialEntries, path }: AllTheProvidersProps) => (
  <I18nextProvider i18n={i18n}>
    <QueryClientProvider client={queryClient}>
      <MemoryRouter initialEntries={initialEntries}>
        <ThemeProvider theme={bo}>
          <ToastContainer />
          <Routes>
            <Route path={path} element={element} />
          </Routes>
        </ThemeProvider>
      </MemoryRouter>
    </QueryClientProvider>
  </I18nextProvider>
);

相关问题