# Dig Deeper

Advanced topics and deeper insights for using Font Awesome with React Native.

> 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`:

```tsx
// __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:

```tsx
<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](https://callstack.github.io/react-native-testing-library/) like any other native component:

```tsx
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()
})
```

  <h4>
    The Font Awesome JavaScript API
  </h4>

Hungry for more? Deep dive into our [Font Awesome SVG Core](/web/dig-deeper/svg-core.md) and
[JavaScript API docs](/apis/javascript.md).