# Example of a unit test for a component that utilizes useFragment

**URL:** <https://community.apollographql.com/t/example-of-a-unit-test-for-a-component-that-utilizes-usefragment/8056>\
**Category:** Client SDKs\
**Tags:** client\
**Created:** [January 7, 2025, 1:07am UTC](https://community.apollographql.com/t/example-of-a-unit-test-for-a-component-that-utilizes-usefragment/8056 "2025-01-07T01:07:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jordan\_epps](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jordan_epps/32/5441_2.png) [@jordan\_epps](https://community.apollographql.com/u/jordan_epps)\
**Post date:** [January 7, 2025, 1:07am UTC](https://community.apollographql.com/t/example-of-a-unit-test-for-a-component-that-utilizes-usefragment/8056/1 "2025-01-07T01:07:44Z")

</div>

Hello! I am currently working on introducing data masking and the `useFragment` hook into one of my projects and I’m realizing that the unit tests for one of the components is no longer passing because of the changes I’ve made. I have searched the docs, the github repo, and done a few google searches, but have yet to come up with any examples that illustrate what a unit test should look like for a component that implements data masking and fragment colocation. Any assistance would be helpful!

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [January 7, 2025, 2:31pm UTC](https://community.apollographql.com/t/example-of-a-unit-test-for-a-component-that-utilizes-usefragment/8056/2 "2025-01-07T14:31:08Z")

</div>

Maybe the `useFragment` tests themselves give you an idea:

> <https://github.com/apollographql/apollo-client/blob/65e203ae713351ac38af41181ea8651a4ce5683c/src/react/hooks/ __tests__ /useFragment.test.tsx>

Generally:

- create ApolloClient and InMemoryCache
- use `client.writeFragment` to write your fragment or `client.writeQuery` to write your “root query”
- render component as you would in a normal test, with a Provider wrapper