Typescript 中 React 测试库包装器的正确类型是什么？

Question

所以我从 kent c dodd 的图书馆得到了这样的东西，非常有用

import * as React from 'react'
import {render as rtlRender} from '@testing-library/react'
import {ThemeProvider} from 'components/theme'

function render(ui, {theme = 'light', ...options} = {}) {
  const Wrapper = ({children}) => (
    <ThemeProvider initialTheme={theme}>{children}</ThemeProvider>
  )
  return rtlRender(ui, {wrapper: Wrapper, ...options})
}

export * from '@testing-library/react'
// override React Testing Library's render with our own
export {render}

不过，我在将其转换为打字稿时遇到了麻烦。关于我需要在下面进行微调的任何想法？

import * as React from 'react'
import { ReactNode } from 'react'
import {render as rtlRender} from '@testing-library/react'
import { QueryClientProvider, QueryClient } from 'react-query'

interface WrapperProps {
  children: ReactNode
}

const queryClient = new QueryClient();
function render(ui, {client = queryClient, ...options} = {}) {
  const Wrapper = ({children}: WrapperProps) => (
    <QueryClientProvider client={client}>
      {children}
    </QueryClientProvider>
  )
  return rtlRender(ui, {wrapper: Wrapper, ...options})
}

export * from '@testing-library/react'
// override React Testing Library's render with our own
export {render}

我收到以下有关在包装纸上打字的信息：

No overload matches this call.
  Overload 1 of 2, '(ui: ReactElement<any, string | JSXElementConstructor<any>>, options: RenderOptions<typeof import("path/node_modules/@testing-library/dom/types/queries"), HTMLElement>): RenderResult<...>', gave the following error.
    Type '({ children }: WrapperProps) => JSX.Element' is not assignable to type 'ComponentType<{}>'.
      Type '({ children }: WrapperProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
        Types of parameters '__0' and 'props' are incompatible.
          Type '{ children?: ReactNode; }' is not assignable to type 'WrapperProps'.
            Property 'children' is optional in type '{ children?: ReactNode; }' but required in type 'WrapperProps'.
  Overload 2 of 2, '(ui: ReactElement<any, string | JSXElementConstructor<any>>, options?: Omit<RenderOptions<typeof import("path/node_modules/@testing-library/dom/types/queries"), HTMLElement>, "queries">): RenderResult<...>', gave the following error.
    Type '({ children }: WrapperProps) => JSX.Element' is not assignable to type 'ComponentType<{}>'.
      Type '({ children }: WrapperProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.ts(2769)
index.d.ts(41, 3): The expected type comes from property 'wrapper' which is declared here on type 'RenderOptions<typeof import("path/node_modules/@testing-library/dom/types/queries"), HTMLElement>'
index.d.ts(41, 3): The expected type comes from property 'wrapper' which is declared here on type 'Omit<RenderOptions<typeof import("path/node_modules/@testing-library/dom/types/queries"), HTMLElement>, "queries">'

Answer 1

试试这个：

import { ReactElement } from 'react'
import { render as rtlRender } from '@testing-library/react'
import { QueryClientProvider, QueryClient } from 'react-query'

const queryClient = new QueryClient();

const render = (ui: ReactElement, { client = queryClient, ...options } = {}) =>
    rtlRender(ui, {
        wrapper: ({ children }) => (
            <QueryClientProvider client={client}>
                {children}
            </QueryClientProvider>
        ), ...options
    });

export * from '@testing-library/react'
// override React Testing Library's render with our own
export { render }

理想情况下，您不应该仅仅为了替换渲染函数而导出整个测试库，您可以创建自己的包装器并将其与测试库一起使用。但是，上面的代码仍然可以正常工作。