Is there a way to mock a request without worrying about response?

[keerthana-tw]

I have a VueJS frontend which uses vue apollo composables and uses msw to unit test the components. There are many places where I have provided refetchQueries as array of query names. i.e

const {
  mutate,
  loading,
  onDone,
  onError,
} = useMutation(addCartItem, {
  refetchQueries: ['getCart'],
});

Now, the getCart query might have been triggered in some parent component and in actual application it works well. When it comes to unit testing the modal that uses this mutation, I am getting console errors saying Unknown query named "getCart" requested in refetchQueries options.include array.

I do not want to silence these error logs at global level as it might lead to case where I actually misspelled the query and it goes unnoticed. Is there a way I can configure in one test like if a call to this query is found, ignore it?

[kettanaito]

Hi, @keerthana-tw. I'm not entirely sure what you are trying to do but I will presume you want to:

1. Make sure that if a query to getCart occurs in test, it must receive a successful response, you just don't care which exact response that would be.

If I get that right, you can achieve that with the following request handler:

// Intercept a GraphQL query called "getCart".
graphql.query('getCart', () => {
  // Respond with an empty successful GraphQL response.
  return Response.json({ data: {} })
})

I still recommend setting { data: {} } on the mocked response so it's compatible with the GraphQL response shape. If this helps, mark this answer. Thanks.

[keerthana-tw]

Actually that wasn't my query. I guess I explained it wrong.

Let's say I have a component called Cart in which I am querying getCart. I also have child components in Cart - DeleteItem, AddItem. These components call respective mutations and refetch 'getCart'

Coming to the test, if I write a unit test for the DeleteItem, I get the error Unknown query named "getCart" requested in refetchQueries options.include array. because the parent was not mounted or the query was not triggered before.

What I am asking is whether there's a way I can configure that if in a particular test (DeleteItem test), if we encounter the refetch query unknown error, ignore and do not log it

[kettanaito]

You achieve that as I described above:

1. Create a request handler for the GraphQL query you wish to ignore (e.g. your getCart query).
2. Return an empty 200 OK response with { data: {} } from the resolver of that handler.

This will treat the query as handled so you won't get any warnings about it.