Jest failing to test component that imports FontAwesomeIcon

Question

I am trying to test a simple functional react-native component using Jest and react-test-renderer. After importing the FontAwesomeIcon component into my component, my tests are failing with the following:

FAIL  src/BudgetLog/components/TransactionList/__tests__/TransactionList.test.js
● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/Users/alexlauni/Code/flex-monet/node_modules/@fortawesome/react-native-fontawesome/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
                                                                                         ^^^^^^

SyntaxError: Unexpected token export

  1 | import React from 'react';
  2 | import { View, Text, Image, StyleSheet } from 'react-native';
> 3 | import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
    | ^
  4 | import { faCommentAlt as commentIcon } from '@fortawesome/free-regular-svg-icons';
  5 |
  6 | const TransactionListItem = ({ created_at, created_by, amount }) => {

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (src/BudgetLog/components/TransactionList/TransactionListItem.js:3:1)

What's the right solution to fix this for my project? Likely more components are going to use FontAwesome icons, so I'm looking for a solution that will be mostly transparent in the future.

I see that jest talks about "transforms", but I don't understand what it's talking about, and I found the documentation a bit dense. I think I could possibly mock FontAwesomeIcon component, but I'm concerned I'd have to explicitly mock every single icon I use then, which seems overly burdensome. Is there a better solution? This feels like something that just needs some configuration.

Answer 1

I mocked the module @fortawesome/react-native-fontawesome inside of the test file and it passed!

jest.mock('@fortawesome/react-native-fontawesome', () => ({
    FontAwesomeIcon: ''
}))