FragmentType mock for story book and tests

[matheusrocha89]

I am using the client-preset with data-masking.
But I am struggling now to mock the data passed to the props of the component that are FragmentType on storybook or tests. Even if I create an object with the properties it says it's not compatible. The only solution I found was casting the object as any when I am passing it.

What do you people do in these situations?

[charlypoly]

Hi @matheusrocha89,

It would be best if you did not use the FragmentType<T> type helper here but the generated fragment type directly, as explained here: #8554 (reply in thread).

[matheusrocha89]

I can't do that, because when I do the useFragment have type issues now.

[matheusrocha89]

So or I use the FragmentType and useFragment or I use the generated Type of my fragment and do not use data masking with useFragment?

[charlypoly]

Could you provide a minimal reproduction using our GitHub, Stackblitz or CodeSandbox template?

That would help me in providing you a full example 🙏🏼

[matheusrocha89]

Sure, check this example, I just created a test to show you, but it's the same for storybook, test or anything related that I need to mock the data for that.

https://github.com/matheusrocha89/codege-fragment-example/blob/main/src/components/ProfileName/ProfileName.test.tsx

[charlypoly]

@matheusrocha89, I'm working on a helper to help with that: #8657

[charlypoly]

Hi @matheusrocha89,

You can now refer to the newly created Fragment Masking documentation: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#fragment-masking-and-testing

[matheusrocha89]

Nice, thanks @charlypoly , already updated the example project.