jestjs - Apollo Boost MockedProvider 在查询中使用片段时返回空对象

Question

我有一个使用 Apollo Boost 的工作测试 MockedProvider ，Jest 和 React 测试库，当我将返回的字段更改为 graphQL fragment它停止工作。我错过了什么？
TicketGql.js

export default class TicketGql {
  static VIEW_FRAGMENT = gql`
    fragment ViewFragment on View {
      viewId
      versionId
      name
      description
      orderedColumns {
        columnId
        name
        descriptions {
          translationId
          lang
          description
        }
      }
    }
  `;

  static GET_TICKET_VIEW = gql`
    query getView($viewId: ID!) {
      view(viewId: $viewId) {
        viewId
        versionId
        name
        description
        orderedColumns {
          columnId
          name
          descriptions {
            translationId
            lang
            description
          }
        }
      }
    }
  `;
}

TicketGql.test.js

...
it('GET_TICKET_VIEW', async () => {
  const currentLang = uniqid('lang_');
  const viewMock = {
    viewId: uniqid('viewId_'),
    versionId: uniqid('versionId_'),
    name: uniqid('name_'),
    description: uniqid('description_'),
    orderedColumns: [],
  };
  _.times(_.random(1, 5), (columnIndex) => {
    viewMock.orderedColumns.push({
      columnId: uniqid('columnId_'),
      name: uniqid('columnId_'),
      descriptions: [],
    });
    _.times(
      _.random(1, 3),
      (descIndex) => viewMock.orderedColumns[columnIndex].descriptions.push({
        translationId: uniqid('translationId_'),
        lang: descIndex === 0 ? currentLang : uniqid('lang_'),
        description: uniqid('description_'),
      }),
    );
  });
  const variables = { viewId: viewMock.viewId };
  const mocks = [
    {
      request: {
        query: TicketGql.GET_TICKET_VIEW,
        variables,
      },
      result: {
        data: {
          view: viewMock,
        },
      },
    },
  ];
  const TicketViewColumns = () => {
    const { data, loading, error } = useQuery(TicketGql.GET_TICKET_VIEW, {
      variables,
    });
    return (
      <div>
        {error}
        <ul>
          {
            loading
              ? 'loading...'
              : (
                data.view.orderedColumns.map((column) => (
                  <li key={column.columnId}>
                    {column.descriptions.find((d) => d.lang === currentLang).description}
                  </li>
                ))
              )
          }
        </ul>
      </div>
    );
  };
  render(
    <MockedProvider mocks={mocks} addTypename={false}>
      <TicketViewColumns />
    </MockedProvider>,
  );
  await waitFor(() => expect(screen.queryAllByRole('listitem'))
    .toHaveLength(viewMock.orderedColumns.length));
 );
...

该测试按原样进行。但是，当我将 GET_TICKET_VIEW 更改为此...

static GET_TICKET_VIEW = gql`
  query getView($viewId: ID!) {
    view(viewId: $viewId) {
      ...ViewFragment
    }
  }
  ${TicketGql.VIEW_FRAGMENT}
`;

...它只是停止工作。 MockedProvide返回 data === { view: {} }而不是 viewMock 中提供的数据，导致 data.view.orderedColumns.map 上的错误如 data.view.orderedColumns是 undefined .我对突变使用此片段进行了另一个测试，并且它有效。
编辑:
包.json

"dependencies": {
  "@apollo/react-hooks": "^4.0.0",
  "apollo-boost": "^0.4.9",
  "graphql": "^15.0.0",
  ...
}
"devDependencies": {
  "@apollo/client": "^3.1.1",
  "@testing-library/jest-dom": "^5.8.0",
  "@testing-library/react": "^10.0.4",
...
}

Answer 1

只需添加 __typename当您使用片段时，到您的模拟对象。
没有片段/联合的简单查询不需要它，但如果您有它，则需要它。
read more here