时间戳

首页 > 解决方案 > 使用字体真棒图标测试反应组件时出现控制台错误

reactjs - 使用字体真棒图标测试反应组件时出现控制台错误

问题描述

我在 react 项目中使用 font-awesome 并使用jestwithenzyme进行测试。我能够显示字体很棒的图标，但是在执行单元测试时，它会引发以下错误：

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' }

注意：仅当我mount使用enzyme. 当我shallow使用enzyme.

我已导入图标并添加到库中，如下所示：

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",
...

标签： reactjsunit-testingfont-awesomeenzyme

解决方案

如果您使用的是 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();

推荐阅读