React Testing Library测试中如何让TypeScript识别默认Props值？

核心原因 #

你遇到的问题是因为函数参数的类型定义仍将children和type标记为必填，但调用时传入的空对象不满足这个类型要求——TypeScript不会自动关联函数内部的默认值到参数类型上，所以需要手动调整类型定义。

解决方案一：精准定义参数类型 #

先明确组件的原始Props类型，再创建一个允许省略默认属性的参数类型，最后在函数内部合并默认值与传入参数：

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

// 组件原始Props定义
interface MyComponentProps {
  children: React.ReactNode;
  type: 'primary' | 'secondary';
  className?: string; // 其他可选属性
}

// 创建参数类型：将需要默认值的必填属性转为可选，保留其他属性原有类型
type CreateComponentParams = Partial<Pick<MyComponentProps, 'children' | 'type'>> & 
                            Omit<MyComponentProps, 'children' | 'type'>;

const createComponent = (params: CreateComponentParams = {}) => {
  // 定义默认Props
  const defaultProps: Pick<MyComponentProps, 'children' | 'type'> = {
    children: '默认子节点内容',
    type: 'primary'
  };
  // 合并默认值与传入参数（传入参数会覆盖默认值）
  const finalProps = { ...defaultProps, ...params };
  return render(<MyComponent {...finalProps} />);
};

// 调用示例
test('渲染默认组件', () => {
  createComponent({}); // 不再报错
});

test('渲染自定义类型的组件', () => {
  createComponent({ type: 'secondary', children: '自定义文本' });
});

解决方案二：使用Partial简化类型定义 #

如果不想拆分类型，可以直接用Partial将所有Props转为可选，合并默认值后通过类型断言告诉TypeScript最终Props是完整的：

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

interface MyComponentProps {
  children: React.ReactNode;
  type: 'primary' | 'secondary';
  className?: string;
}

const createComponent = (props: Partial<MyComponentProps> = {}) => {
  const finalProps = {
    // 补全必填属性的默认值
    children: '默认子节点内容',
    type: 'primary',
    ...props
  };
  // 类型断言确保finalProps符合MyComponentProps类型
  return render(<MyComponent {...finalProps as MyComponentProps} />);
};

// 调用示例
test('渲染默认组件', () => {
  createComponent({});
});

关键说明 #

• 两种方法的核心都是让函数参数类型允许省略有默认值的必填属性，同时在函数内部确保最终传入组件的Props是完整的。
• 方案一更精准，能严格限制传入参数的类型；方案二更简洁，适合快速实现。

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