Support reacts hooks | Voters

Support reacts hooks

closed

Subarna Karki

Currently I am trying to create a pact consumer test. My query is being called inside a React component using the Apollo useQuery hook and I cannot call the useQuery hook inside my pact consumer test because it is not a functional component.

September 22, 2020

Matt Fellows

marked this post as

closed

Closing as there are other ways to do this

Alex Elmekeev

I believe this can be closed tbh, Subarna Karki, this is how you can do this:

Create a method that will return data for your component to render. All it should do is to call
useQuery
and (probably) do the data transformation.
In your test you can use
renderHook
from
@testing-library/react-hooks
, something like:

await provider.addInteraction(yourInteraction)
const { result, waitForNextUpdate } = renderHook(
    () => useYourMethodHere('1'),
    { wrapper: apolloProviderWrapper }
)
await waitForNextUpdate()
expect(result).toBeGreaterThan(0)

apolloProviderWrapper
there is something like

const apolloProviderWrapper = ({
  children,
}: {
  children?: React.ReactNode
}) => <ApolloProvider client={client}>{children}</ApolloProvider>

Note

: I had to override

addTypename

to be able to re-use queries in the interaction.

Beth

You're best to extract the part of the code that performs the HTTP request into a separately testable component, and create the pact that way. See https://docs.pact.io/consumer#avoid-using-pact-for-tests-that-involve-the-ui

Alex Elmekeev

To be honest I don't think that this a feature request for pact. I also would like to be able to generate pact contract by running the spec that will call the code with useQuery
. I will investigate if I will find the workaround and post it here.
For me Cypress feature request is not a solution because we have e2e cypress test that we can run against real env or stubbed backend where we stub it with pact. It works fine for now cause we have frontend which is colocated with BFF and have contracts only between BFF and upstream REST services.
Soon we going to start calling GQL gateways (federated) directly from Frontend so we will need to stub also GQL endpoints. For this my idea was to add contracts between Frontend and GQL Gateway.

Matt Fellows

Is this a bug report or a feature request? What is the actual ask here? We would generally not recommend you do Pact testing this way. Alternatively, you could look at the Cypress feature request and test it that way.