Apollo-client: How to mock a union type in apollo client

[hardikmodi1]

I want to test the apollo client with mock provider it is working correctly with the queries and mutation with normal return values. But for register mutation I have response which includes the unions so the mutation of of the following type -

register(data: $data) {
      ... on Error {
        error {
          path
          message
        }
      }
      ... on RegisterSuccess {
        user {
          email
          _id
          username
        }
      }
    }

I have mocked this response with apollo client in the following way

const mocks = [
      {
        request: {
          query: RegisterMutation,
          variables: {
            data: {
              email: 'test',
              username: 'test',
              password: 'test',
            },
          },
        },
        result: {
          data: {
            register: {
              error: [
                {
                  path: 'email',
                  message: 'Email already in use',
                },
              ],
            },
          },
        },
      },
    ];

But this is not working and giving error that,

Warning: An unhandled error was caught from submitForm() Error: No more mocked responses for the query: mutation Register($data: RegisterInput!) {
      register(data: $data) {
        ... on Error {
          error {
            path
            message
          }
        }
        ... on RegisterSuccess {
          user {
            email
            _id
            username
          }
        }
      }
    }
    , variables: {"data":{"email":"","username":"","password":""}}

[henryqdineen]

It should work if you add __typename properties your mock data

[hardikmodi1]

@henryqdineen I had tried that too by modifying the mocked data to

result: {
          data: {
            __typename: 'Mutation',
            register: {
              __typename: 'Error',
              error: [
                {
                  path: 'email',
                  message: 'Email already in use',
                },
              ],
            },
          },
        },

But still it gives the same warning

[benjamn]

@hardiked Can you try putting this into a reproduction, using this template? I would have made the same suggestion as @henryqdineen, so there must be something else going on here.

[hardikmodi1]

@benjamn @henryqdineen I have added one commit to demonstrate the case that is failing for me. You can check it here.
It is working fine if there is not input for mutation but as soon as I added input for that mutation it started to fail. I don't know I am doing something wrong or not

[henryqdineen]

It looks like your mock uses [email protected] and the component you're testing uses a different email so the variables don't match.

[hardikmodi1]

@henryqdineen Thanks for the help, Working fine now after passing the same email. Error it self in someway pointing to this solution. My bad.