使用 React/Typescript 在 test-utils 中扩展 React 测试库的自定义渲染的返回类型是什么？答案

【问题标题】：What is the return type of a custom render for extending React Testing Library in test-utils using React/Typescript?使用 React/Typescript 在 test-utils 中扩展 React 测试库的自定义渲染的返回类型是什么？
【发布时间】：2021-07-05 02:28:17
【问题描述】：

我不确定使用 React 测试库的渲染的自定义渲染函数的返回类型，我会假设它是元素或 JSX，但这似乎不起作用。

代码：

import React, { ReactElement } from 'react'
import { render, RenderOptions } from '@testing-library/react'
import { theme } from './theme'
import { ThemeProvider } from 'styled-components'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { searchReducer, initialState } from './store/reducer/searchReducer'

const store = createStore(searchReducer, initialState)

interface ProviderProps { 
  children?: NonNullable<React.ReactNode>
}

const TheProvider: React.FC<ProviderProps> = ({
  children,
}) => {
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        { children }
      </ThemeProvider>
    </Provider>
  )
}

// here is the issue for function return type
const customRender= (
  ui: ReactElement,
  options?: Omit<RenderOptions, 'queries'>
) => render(ui, { wrapper: TheProvider, ...options })

export * from '@testing-library/react'

export { customRender as render }

【问题讨论】：

它应该隐式返回与来自@testing-library/react 的render 函数相同的类型。
这就是我的假设，但是我的 customerRender 函数道具有“缺少函数的返回类型”的警告，当我为函数提供返回类型“typeof render”时，它会出错；类型 'RenderResult' 不可分配给类型 '{

标签： reactjs typescript function react-testing-library react-typescript

【解决方案1】：

当我给函数返回类型typeof render 时，它会出错；类型 'RenderResult' 不可分配给类型 '{

customRender 的返回类型将是 ReturnType<typeof render> 而不仅仅是 typeof render。这可行，但您不需要使用typeof，因为您可以从 React 测试库包中导入正确的类型。你想要的类型是RenderResult。

import { render, RenderOptions, RenderResult } from '@testing-library/react'

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "queries">
): RenderResult =>
  render(ui, { wrapper: TheProvider, ...options });

【讨论】：