Dig Deeper

You can take Font Awesome with React Native to the next level by learning a little more about what's happening behind the scenes — and how to make it work well with your test suite.

Unit Testing

When testing components, any icons referenced in those components need to be available for testing. You have a couple choices:

1. If you're testing a child component on its own, import its icons explicitly in that test or component.
2. If you've built a library instead, and your test doesn't include the root module that defines the library, you may see errors like this:

Could not find icon { prefix: 'fas', iconName: 'chevron-right' }

If the icon isn't important to the particular test, you can mock FontAwesomeIcon:

// __mocks__/@fortawesome/react-native-fontawesome.tsx
import React from 'react'
import { View } from 'react-native'

export function FontAwesomeIcon() {
  return <View testID="mocked-fa-icon" />
}

Snapshot Testing

The FontAwesomeIcon component auto-generates an id for mask elements, which changes between renders and breaks snapshot tests. Use the maskId prop to set a stable id:

<FontAwesomeIcon icon="mug-saucer" mask="circle" maskId="mug-saucer-mask" transform="shrink-6" />

With a fixed maskId, the rendered SVG stays deterministic across runs and your Jest snapshots stay stable.

Querying Icons in Tests

FontAwesomeIcon forwards testID to the rendered SVG element, so you can find icons in react-native-testing-library like any other native component:

import { render, screen } from '@testing-library/react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

test('renders the coffee icon', () => {
  render(<FontAwesomeIcon icon={faMugSaucer} testID="coffee-icon" />)
  expect(screen.getByTestId('coffee-icon')).toBeTruthy()
})