Better way of testing graphql variables

[zgrybus]

Currently, there is following way to test graphql variables:

it('edits activity', async () => {
    mockedGraphqlServer.use(
      graphql.mutation('EditActivity', (req, res, ctx) => {
        expect(req.variables).toEqual({
          id: 123,
          text: 'my new text',
        });
        return res(ctx.data({ modifyUpdate: { id: '123' } }));
      }),
    );

    const props = produce(initialProps, draftProps => {
      draftProps.onSuccess = jest.fn();
    });
    const { result } = setup(props);

    act(() => {
      result.current.onEditActivity(123, 'my new text');
    });

    await waitFor(() => {
      expect(Steps.notification()).toHaveTextContent('Your post was successfully updated');
      expect(props.onSuccess).toHaveBeenCalled();
    });
  });

However, what if I call onEditActivity twice with different arguments?
First time with:

act(() => {
   result.current.onEditActivity(123, 'my new text');
});

Second time with:

act(() => {
   result.current.onEditActivity(321, 'my second text');
});

The above assertion won't pass :/

Is it possible to test those variables differently?

I can't check, whether something displays on the UI, as I'm testing hook alone and I'm doing some calculations before calling the server, so I want to make sure that variables are correctly amended

[mattcosta7]

I think there are potentially a few options here. One that could be reasonable for your use case could be something like

it('edits activity', async () => {
    const editActivityMutationCalls = []
    mockedGraphqlServer.use(
      graphql.mutation('EditActivity', (req, res, ctx) => {
        editActivityMutationCalls.push(req.variables)
        return res(ctx.data({ modifyUpdate: { id: req.variables.id } }));
      }),
    );

    const props = produce(initialProps, draftProps => {
      draftProps.onSuccess = jest.fn();
    });
    const { result } = setup(props);

    act(() => {
      result.current.onEditActivity(123, 'my new text');
    });
    expect(editActivityMutationCalls).toHaveLength(1)
    expect(editActivityMutationCalls[0]).toEqual({
          id: 123,
          text: 'my new text',
        });

    act(() => {
      result.current.onEditActivity(124, 'my new text2');
    });
    expect(editActivityMutationCalls).toHaveLength(2)
    expect(editActivityMutationCalls[1]).toEqual({
          id: 124,
          text: 'my new text2',
        });
  });

in this case you can track the calls made, and assert on the call history, rather than asserting inline in the handler

[zgrybus]

Makes sense 🤔 Honestly, I like that solution. I will try it out 👍 Thanks!

[vldslv-a]

[mattcosta7]

@vldslv-a there's very little difference in version 2 here. The only difference is how you respond to the request in the handler. Do you have a specific question about how to do that?

    const editActivityMutationCalls = []
    mockedGraphqlServer.use(
-      graphql.mutation('EditActivity', (req, res, ctx) => {
+      graphql.mutation('EditActivity', ({variables}) => {
        editActivityMutationCalls.push(variables)
-        return res(ctx.data({ modifyUpdate: { id: req.variables.id } }));
+        return HttpResonse.json({ data: { modifyUpdate: { id: variables.id } } } )
      }),
    );

This is just the standard migration from v1->v2 see: https://mswjs.io/docs/migrations/1.x-to-2.x/