Какой импорт использовать с FontAwesomeIcon, React и Jest?

Question

У меня есть сайт React (с использованием TypeScript и Webpack), который использует пакет react-fontawesome FortAwesome для рендеринга иконок. Этот пакет импортируется следующим образом:

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

При добавлении Jest-тестов с использованием Enzyme все тесты, в которых используется компонент, содержащий ссылку на 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, Вавилоном и, возможно, фазой луны, но после нескольких часов борьбы с этим у меня заканчиваются идеи ...

Answer 1

Как и ожидалось, это было столкновение стандартов и больше связано с TypeScript, чем с чем-либо еще. Решением было добавить "allowSyntheticDefaultImports": true в файл tsconfig.json. Надеюсь, это поможет тем, кто придет после ...

Answer 2

, если вы хотите использовать
import * as FontAwesomeIcon from '@fortawesome/react-fontawesome';
тогда вы должны использовать:
<FontAwesomeIcon.default icon={faUser} />
(= вы выбираете функцию / реагирующий компонент)

import * преобразует не-объекты в объекты и добавляет свойство .default, которое указывает на оригинальный тип модуля (функция в нашем случае). Каждый компонент, который вы импортируете / используете для создания нового реагирующего компонента, должен быть функцией, классом или строкой тега (например, <div>), а не объектом, и именно по этой причине вы получили ошибку type is invalid. React.createElement () документы

Проверьте эту песочницу , чтобы увидеть рабочий пример fontawesome с import * as.
Обратите внимание на разницу между «импортами», зарегистрированными в консоли песочницы

Я также проверил локально ваш случай с помощью create-реакции-приложения, и у меня не было проблем с шуткой или реакцией.

РЕДАКТИРОВАТЬ: Обе ошибки, которые вы получили, связаны с реакции (не машинопись или шутка).