Apollo Client - 如何使用使用 compose 的 HOC 组件测试使用多个查询的组件

Question

我正在阅读用于测试 React/Apollo 组件的文档Link。如果组件有一个查询，测试它似乎很简单。

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>,
  );
});

我的组件与文档中提供的组件略有不同。

1. 它不使用useQuery 钩子，而是选择使用HOC 方法作为outlined here。
2. 我的函数使用了两个查询，因此我使用了两个 graphql 函数并使用 compose、as recommended in the docs 将它们组合在一起。

我的组件是这样导出的：

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,
        },
    }),
});

我要做的是为mocks 对象提供多个对象，每个对象都包含一个request/result 用于相应的查询。我只是想知道是否有人以类似的方式测试过他们的组件，或者是否有更好的建议。

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

我也对在 result 对象中放入什么感到困惑。当我console.log 在生产中进行查询时实际返回给组件的内容时，它的数据加上error、fetchMore、loading、networkStatus。我是否也必须将所有这些东西都放在模拟中？

Answer 1

我的感觉是正确的。结果对象应如下所示：

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