TypeScript中React Testing Library render函数wrapper参数不匹配问题

错误根源 #

你遇到的TypeScript报错是两个基础类型定义错误导致的：

• 误用React.ReactChildren作为children的类型：React.ReactChildren是React提供的操作children的工具集合（包含map/forEach等方法），不是描述children内容的类型
• React Testing Library的wrapper参数要求传入的组件兼容{ children?: ReactNode }的props结构，你的自定义Props类型和要求不匹配

修正后代码 #

import React from 'react';
import { Queries, render as rtlRender } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { RenderResult } from '@testing-library/react/types';

/* Type Definitions */
type Route = {
  state: Record<string, unknown>;
  title: string;
  location: string;
};

// 扩展RTL的RenderOptions类型，添加自定义的route参数
type CustomRenderOptions = {
  route: Route;
} & Parameters<typeof rtlRender>[1];

/* Helper Functions */
export function render(ui: JSX.Element, options: CustomRenderOptions): RenderResult<Queries, HTMLElement> {
  // 拆分自定义参数和RTL原生参数，避免传多余字段给rtlRender
  const { route, ...rtlOptions } = options;
  window.history.pushState(route?.state ?? null, route?.title ?? 'Root', route?.location ?? '/');
  
  // React.FC内置了children?: ReactNode的类型定义，不需要额外声明Props
  const Wrapper: React.FC = ({ children }) => {
    return <BrowserRouter>{children}</BrowserRouter>;
  };

  return rtlRender(ui, { wrapper: Wrapper, ...rtlOptions });
}

修改点说明 #

• 用React.FC定义Wrapper组件：它本身已经内置了children?: ReactNode的类型定义，完全符合RTL对wrapper组件的类型要求。你之前声明React.FC<Props>报错，就是因为你自定义的Props里children用了错误的React.ReactChildren类型，修正children类型为React.ReactNode之后也可以正常使用自定义Props的写法
• 扩展了自定义RenderOptions类型，拆分自定义route参数和RTL原生参数，避免把不识别的route字段传给rtlRender
• 删掉了错误的React.ReactChildren类型使用，统一用React内置的类型推导，减少冗余类型声明

如果需要禁止外部传入wrapper参数，只需要把CustomRenderOptions定义改成type CustomRenderOptions = { route: Route; } & Omit<Parameters<typeof rtlRender>[1], 'wrapper'>即可。

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