使用超赞字体图标测试 React 组件时出现控制台错误

Question

我在 React 项目中使用 font-awesome 并使用 jest 和 enzyme 进行测试。我能够显示超棒的字体图标，但在执行单元测试时，它抛出以下错误：

console.error node_modules/@fortawesome/react-fontawesome/index.js:325
    Could not find icon { prefix: 'fas', iconName: 'arrow-right' }
console.error node_modules/@fortawesome/react-fontawesome/index.js:325
    Could not find icon { prefix: 'fas', iconName: 'arrow-right' }
console.error node_modules/@fortawesome/react-fontawesome/index.js:325
    Could not find icon { prefix: 'fas', iconName: 'arrow-right' }
console.error node_modules/@fortawesome/react-fontawesome/index.js:325
    Could not find icon { prefix: 'fas', iconName: 'arrow-right' }
console.error node_modules/@fortawesome/react-fontawesome/index.js:325
    Could not find icon { prefix: 'fas', iconName: 'arrow-right' }

注意： 只有当我使用 enzyme 的 mount 方法测试组件时才会发生这种情况。当我使用 enzyme.

的 shallow 方法测试组件时，问题没有发生

我已经导入图标并添加到库中如下：

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
...
library.add(fab, faArrowRight);

我使用的图标如下：

<FontAwesomeIcon icon='arrow-right' />

我正在使用以下软件包：

...
"@fortawesome/fontawesome-svg-core": "^1.2.20",
"@fortawesome/free-brands-svg-icons": "^5.10.0",
"@fortawesome/free-regular-svg-icons": "^5.10.0",
"@fortawesome/free-solid-svg-icons": "^5.10.0",
"@fortawesome/react-fontawesome": "^0.1.4",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
...

Answer 1

如果您使用的是 create-react-app，则有一种比模拟更简单的方法。创建一个只进行图标注册的模块，可以命名为 registerFaIcons.js。然后，您的 React 应用程序和 Jest 测试都可以使用它。

来源和参考这些问题 - https://github.com/FortAwesome/react-fontawesome/issues/154

import { library } from '@fortawesome/fontawesome-svg-core';
import {
    faSpinner
} from '@fortawesome/free-solid-svg-icons';

export default function registerIcons() {
    library.add(
        faSpinner
    );
}

因此，使用 create-react-app，在 setupTests.js 文件中，您可以放置导入和调用 registerIcons 方法的代码。这将注册供所有测试使用的图标，并且 FA 图标将按预期呈现。

import registerFaIcons from './registerFaIcons';

registerFaIcons();

Answer 2

现在微软为此添加了一个功能，这样更容易

import { setIconOptions } from '@fluentui/react/lib/Styling';

// Suppress icon warnings.
setIconOptions({
  disableWarnings: true
});

使用超赞字体图标测试 React 组件时出现控制台错误

console errors while testing react component with font-awesome icon

unit-testing

font-awesome

reactjs

enzyme