JSX 元素类型 'AddIcon' 在测试时没有任何构造或调用签名

Question

我有这个代码：

const tableIcons: Icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />)
};

const AddIcon = tableIcons.Add;

describe("tableIcons", () => {
  test("Render Add Icon as example", () => {
    const ref = React.createRef();
    render(<AddIcon ref={ref} />);
    screen.debug();
  });
});

我遇到了这个错误，请问是什么原因导致的？

Answer 1

AddIcon 组件的类型应该是 ForwardRefExoticComponent 通用类型。参见 return 类型的 forwardRef 函数：

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

一个工作示例：

import { render, screen } from '@testing-library/react';
import React, { forwardRef, ForwardRefExoticComponent } from 'react';

const AddBox = forwardRef((props, ref) => <div>AddBox</div>);
const Check = forwardRef(() => <span>Check</span>);

interface AddIconProps {}
interface CheckProps {}
interface Icons {
  Add: ForwardRefExoticComponent<AddIconProps & React.RefAttributes<HTMLDivElement>>;
  Check: ForwardRefExoticComponent<CheckProps & React.RefAttributes<HTMLSpanElement>>;
}

const tableIcons: Icons = {
  Add: forwardRef<HTMLDivElement, AddIconProps>((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef<HTMLSpanElement, CheckProps>((props, ref) => <Check {...props} ref={ref} />),
};

const AddIcon = tableIcons.Add;

describe('tableIcons', () => {
  test('Render Add Icon as example', () => {
    const ref = React.createRef<HTMLDivElement>();
    render(<AddIcon ref={ref} />);
    screen.debug();
  });
});

包版本：

"react": "^16.14.0",
"typescript": "^4.1.2"

JSX 元素类型 'AddIcon' 在测试时没有任何构造或调用签名

JSX element type 'AddIcon' does not have any construct or call signatures when testing

typescript

reactjs

react-testing-library