如何在TypeScript测试中收窄React组件的类型？

针对你遇到的问题，有几种可靠的方式在测试中收窄返回值类型，解决props不存在于string类型的报错：

1. 使用React官方提供的isValidElement类型守卫 #

React内置了isValidElement函数，它本身就是一个类型守卫，可以准确判断值是否为React元素，TypeScript会自动在分支中推断出正确的类型：

import { isValidElement } from 'react';

// 传入合法日期的测试用例
test('format valid date returns React component with correct props', () => {
  const validDate = new Date('2024-01-01');
  const result = format(validDate);

  if (isValidElement(result)) {
    // 此处result已被推断为ReactElement，可安全访问props
    expect(result.props.date).toEqual(validDate);
  } else {
    // 可选：针对意外情况的断言，确保测试用例符合预期
    fail('Expected format to return ReactElement for valid date');
  }
});

2. 自定义类型守卫函数 #

如果需要更定制化的判断逻辑，可以自己写一个类型守卫：

import { ReactElement } from 'react';

function isFormatReactResult(value: ReactElement | string): value is ReactElement {
  return typeof value === 'object' && value !== null && 'props' in value;
}

// 测试中使用
test('format valid date returns component with props', () => {
  const result = format(new Date());
  if (isFormatReactResult(result)) {
    expect(result.props.someProp).toBeDefined();
  }
});

3. 类型断言（谨慎使用） #

如果你能100%确定当前测试用例传入的是合法日期，必然返回ReactElement，可以用类型断言快速跳过类型检查，但这种方式缺乏类型安全保障，若测试用例写错传入非法值，会导致运行时错误：

import { ReactElement } from 'react';

test('format valid date returns component', () => {
  const result = format(new Date()) as ReactElement;
  expect(result.props.date).toBeInstanceOf(Date);
});

优先推荐前两种类型守卫的方式，既符合TypeScript的类型安全原则，也能让测试代码更健壮。

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