Optionally provide callback for MockedReponse.results

[Samigirma1]

Hello! 😊

I was trying to use the MockedProvider to test a connected component. However, there's no way for me to use the variables from the query to generate a dynamic response. Would it be possible to add this feature for the mock provider?

Alternatively, the mock prop can be a object with a signature like....

// This is probably an incorrect typed definition :)
{
 callback: (
     request: DocumentNode | TypedDocumentNode<TData, TVariables>,
     variables?:  TVariables,
     addTypeName?: boolean,
   ) => {
       result?: FetchResult<TData>,
       error?: ApolloError
     },
 delay?: number |
   (
     (request?: DocumentNode | TypedDocumentNode<TData, TVariables>,
       variables?:  { [key: string]: any }) => number)
} |
 ReadonlyArray<MockedResponse>

It will use the request and its variables to create a dynamic server response. If provided, it would also delay the response by number of milliseconds specified by the delay. If delay is a callback, it will calculate the delay amount using the request and variables for each request.

[koenpunt]

A mocked response's result can be a function, would that help?

<MockedProvider mocks=[
  {
    request: {
      query: ...,
      variables: { ... }
    },
    result: () => {
      // Here you could reuse the arguments you passed to your component.
      return { data: { ... } };
    }
  }
]>

[Samigirma1]

Not really. If I understand the docs correctly, that would still require that I fully enumerate all the requests my components would make in their lifecycle. But in use cases where query variables are dynamic--one example could be a list component with infinite scrolling that varies it's fetchMore size based on screen size--I would have to enumerate a mock array with all the possible (and reasonable) fetch sizes. I was trying to avoid this by simply using a callback that receives the query and variables/options, and returns the appropriate query object/error.

[koenpunt]

And what about the newData property of MockedResponse?

It's undocumented afaik, but it should allow you to return arbitrary data for any request, without having to define all individual responses.

Haven't used it myself, but maybe that can help you?

[Samigirma1]

That still does not allow query responses to be generated dynamically for each response.

[dylanwulf]

I personally prefer this approach instead of MockedProvider for scenarios like this: https://www.arahansen.com/testing-apollo-components-using-react-testing-library/