console errors while testing react component with font-awesome icon

Question

I am using font-awesome in react project and using jest with enzyme for testing. I am able to display the font-awesome icons but while performing unit testing, it is throwing following errors:

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

Note: It is happening only when I am testing component using mount method of enzyme. Issue is not happening when I test component using shallow method of enzyme.

I have imported the icons and added in library as follow:

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);

I have used icon as below:

<FontAwesomeIcon icon='arrow-right' />

I am using following packages:

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

If you are using create-react-app there is an easier way than mocking. Create a module that just does the registering of the icons, maybe named registerFaIcons.js. This can then be used by both your React application as well as the Jest tests.

Source and refer for these issues - 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
    );
}

So with create-react-app, within your setupTests.js file you can put code that imports and calls the registerIcons method. This will register the icons for use by all tests and the FA icons will render as expected.

import registerFaIcons from './registerFaIcons';

registerFaIcons();