Is there a more accurate way to use <MockedProvider /> for testing apollo requests

Question

I've got my <MockedProvider /> set up passing in mocks={mocks}. everything is working, all good.

the issue is I have a form that whenever any part of it is edited then this makes a mutation, which returns a response and updates the total. say for example, quantity is changed, mutation increases quantity from 1 to 2. total price should double

problem is that in unit tests and mocked provider you only test the functionality in props and hardcoded response. it's not a proper test. perhaps it's more of an e2e/integration test but I was wondering if there's anything you can do with MockedProvider that allows for better testing in this situation?

Answer 1

Instead of using the normal static result property of the objects in the mocks array, you can set a newData function that will run dynamically and use whatever is returned as the result value. For example:

let totalNoteCount = 0;

const mocks = [{
  request: {
    query: CREATE_NOTE,
    variables: {
      title: 'Aloha!',
      content: 'This is a note ...',
    },
  },
  newData: () => {
    // do something dynamic before returning your data ...
    totalNoteCount += 1;
    return {
      data: {
        createNote: {
          id: 1,
          totalNoteCount,
        },
      },
    };
  }
}];