Best practice for mocking cache to test offline mutations?

[JohnAtFenestra]

I'm hoping someone can point me in the right direction. As an example, we have a mutation:

      addTeacher(result, args, cache, info) {
        const { variables, metadata } = variableExtractor(info.variables)
        const newTeacher = result.AddTeacher.teacher
        cache.updateQuery(
          {
            query: allQueries.GetSampledGrade,
            variables: { visitId: metadata.visitId }
          },
          data => {
            console.log({ data })
            if (data !== null) {
              if (data.GetSampledGrade.body) {
                console.log('Pushing to teachers array')
                data.GetSampledGrade.body.teachers.push(newTeacher)
              }
            }
            return data
          }
        )

We are injecting the new teacher into an array of teachers in the cache for offline updates. My question is this:

What would be the best practice for creating a Jest test for this? I suppose I could mock cache.updateQuery, but I think it might be better to have a sample of data from an existing cache and create a cache object to pass in, so that I can test against the real functionality.

I've gone through the urql source, but I haven't been able to put my finger on how to generate the cache object which is passed into an offline mutation.

Can somebody help?

[kitten]

So there isn’t really a full story for this because we’d assume that E2E tests would take better care of this. But given that you’re explicitly asking for unit tests you can actually mock the entire store: https://github.com/FormidableLabs/urql/blob/1569515539f7f859d2919fb8e5f4e5b439a3cf4e/exchanges/graphcache/src/index.ts#L3

You’ll notice that we left Store, query, and write exposed. These are all the primitive you’d need to mock Graphcache’s store without the entire exchange or client.

We don’t really have that documented as it’s technically part of the private API, but I don’t expect it changing a lot. Furthermore we do have our micro benchmarking code in the repo, which may give you an idea of how you can test the Store (Which by the way is the cache instance you see on resolvers and updaters) https://github.com/FormidableLabs/urql/blob/main/exchanges/graphcache/benchmark/suite.js

It takes the same config as the exchange too, so that should help with familiarity: https://github.com/FormidableLabs/urql/blob/1569515539f7f859d2919fb8e5f4e5b439a3cf4e/exchanges/graphcache/src/store/store.ts#L34

So in your case, you could instantiate the Store with your usual or just a partial config, write mock data to GetSampledGrade, then write a mock mutation for Mutation.addTeacher, and finally run query again on GetSampledGrade to check whether the expected changes have been made.

[ginnymin]

Hello @kitten ! I was using query and write for unit testing cache mutations but it looks like in a recent release of the graphcache exchange, those were removed and are no longer exposed (#3165).

Is there a better way to test the mutations?

[ginnymin]

Sorry to revive a really old question, but I'm wanting to unit test the cache as well. I think I follow most of the suggested answer, except for the part on mocking the mutation / running the mock mutation on the Store with the mock data written to it already?

Let me know if you'd like me to submit a new question for this instead!

[ginnymin]

NEVERMIND! I think I figured it out!