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

问题描述

我正在阅读测试 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>,
  );
});

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

它不使用useQuery钩子，而是选择此处概述的 HOC 方法。
我的函数使用了两个查询，因此我使用了两个graphql函数并使用将它们组合在一起compose，如 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. 我是否也必须将所有这些东西都放在模拟中？

标签： reactjstestingapolloreact-apolloapollo-client

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

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

问题描述

解决方案

推荐阅读