mardi 30 juin 2020

Apollo Client - How to test a component that uses multiple queries, using HOC components that use compose

I am reading over the docs for testing React/Apollo components Link. If the component has one query, it seems pretty simple to test it.

const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    },
    result: {
      data: {
        dog: { id: '1', name: 'Buck', breed: 'bulldog' },
      },
    },
  },
];

it('renders without error', () => {
  renderer.create(
    <MockedProvider mocks={mocks} addTypename={false}>
      <Dog name="Buck" />
    </MockedProvider>,
  );
});

My component is a little different than the one provided in the documentation.

  1. It doesn't use the useQuery hook, instead I am opting for the HOC approach as outlined here.
  2. I have two queries that my function uses, and so I use two graphql functions and combine them together using compose, as recommended in the docs.

My component is exported like this:

export default compose(withQueryA, withQueryB)(MyComponent);

const withQueryA = graphql(QUERY_A, {
    name: "QueryA",
    options: (props) => ({
        variables: {
            foo: props.foo,
        },
    }),
});

const withQueryB = graphql(QUERY_B, {
    name: "QueryB ",
    options: (props) => ({
        variables: {
            bar: props.bar,
        },
    }),
});

What I'm trying to do is provide the mocks object with multiple objects, each containing a request/result for the corresponding query. I just wanted to know if anyone has been testing their components in a similar way or if there is a better suggestion.

const mocks = [
    {
        request: {
            query: QUERY_A,
            variables: {
                foo: "bar",
            },
        },
        result: {
            data: {
                ...,
            },
        },
    },
    {
        request: {
            query: QUERY_B,
            variables: {
                foo: "bar",
            },
        },
        result: {
            data: {
                ...,
            },
        },
    },
];

I'm also confused about what to put in the result object. When I console.log what is actually returned to the component when making a query in production, it has the data plus error, fetchMore, loading, networkStatus. Do I have to put all those things in the mocks as well?

Aucun commentaire:

Enregistrer un commentaire