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泛型。参见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"