Javascript 与FontAwesomeIcon、React和Jest一起使用哪个导入？

我有一个React站点（使用TypeScript和Webpack），它使用FortAwesome的

React fontawesome

包来呈现图标。此程序包的导入方式如下：

import FontAwesomeIcon from '@fortawesome/react-fontawesome';

使用酶添加Jest测试时，任何使用包含对

FontAwesomeIcon

引用的组件的测试都会失败，原因如下：

Warning: React.createElement: type is invalid -- expected a string (for built-in
components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might
have mixed up default and named imports.

将这些组件上的导入更改为：

import * as FontAwesomeIcon from '@fortawesome/react-fontawesome';

修复了测试，但浏览到包含该组件的页面失败，原因是：

Warning: React.createElement: type is invalid -- expected a string (for built-in
components) or a class/function (for composite components) but got: object.

我认为这是ES6、巴别塔和月亮相位之间的冲突，但经过几个小时的斗争，我已经没有主意了……

如果你想使用

import*作为来自'@fortaweasome/react fontaweasome'的fontaweasome图标

然后您必须使用：



（=您选择功能/反应组件）

import*
将非对象转换为对象，并添加指向原始模块类型（本例中的函数）的
.default
属性。导入/使用以创建新react组件的每个组件都应该是函数、类或标记字符串（例如
），而不是对象，这就是您得到
类型无效的原因

选中此项查看fontawesome与
import*as


注意沙箱控制台上记录的“导入”之间的差异

我还使用CreateReact应用程序对您的案例进行了本地测试，没有任何问题可开玩笑或作出反应

编辑：您得到的两个错误都与react（而不是typescript或jest）有关。
正如预期的那样，这是标准冲突，与typescript的关系比其他任何东西都要密切。解决方案是在
tsconfig.json
文件中添加
“allowSyntheticDefaultImports”：true
。希望这能帮助后面的人……
您使用外部加载还是显式/自定义库导入（导入图标，-s您需要）？图标本身作为对象导入，例如，
import*作为faUser从'@fortawesome/fontawesome pro-solid/faUser'导入
，
谢谢@AndreasT，不幸的是，虽然该更改将保持站点运行，但Jest测试仍然会失败，并出现相同的错误，如果
导入FontAwesomeIcon…
&
和
导入FontAwesomeIcon…
是等效的，这是有意义的。