如何解决React文本输入组件单元测试中的类型不兼容错误？

针对你遇到的TypeScript类型错误及测试问题，这里有两个关键修复点：

1. 修正测试中change函数的类型匹配 #

你的TextInputProps里定义change为ChangeEventHandler<HTMLInputElement>，这个类型要求函数必须接收一个React.ChangeEvent<HTMLInputElement>类型的参数。而你测试里写的change(): void {}没有参数，不符合类型要求，导致TypeScript报错。

修改测试代码中的props定义：

const props: TextInputProps = {
  // 给函数添加符合要求的参数（用下划线表示参数未使用）
  change: (_e: React.ChangeEvent<HTMLInputElement>) => {},
  value: '',
  placeholder: 'Full Name',
  variant: 'neutral',
};

2. 替换toHaveAttribute为toHaveValue检查输入框值 #

toHaveAttribute是用来验证DOM元素的HTML属性，而受控输入框的value是DOM对象的property，两者不是同一概念。当value为空字符串时，部分浏览器不会渲染这个HTML属性，同时Testing Library的toHaveAttribute在处理空字符串值时也容易触发类型问题。

改用专门用于检查输入框值的toHaveValue matcher：

// 替换之前的toHaveAttribute('value', '')
expect(screen.getByRole('textbox')).toHaveValue('');

完整修复后的测试代码 #

import React from 'react';
import { render, screen } from '@testing-library/react';
import TextInput from './TextInput';
import { TextInputProps } from 'src/types';

describe('Text Input', function () {
  it('should render default', function () {
    const props: TextInputProps = {
      change: (_e: React.ChangeEvent<HTMLInputElement>) => {},
      value: '',
      placeholder: 'Full Name',
      variant: 'neutral',
    };

    render(<TextInput {...props} />);
    expect(screen.getByRole('textbox')).toBeInTheDocument();
    expect(screen.getByRole('textbox')).toHaveAttribute(
      'placeholder',
      'Full Name'
    );
    expect(screen.getByRole('textbox')).toHaveValue('');
  });
});

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