@apollo/client/testing的MockedProvider处理GraphQL联合类型异常

技术栈 #

• 项目：NextJS + ApolloGraphQL
• 测试框架：Jest + @testing-library/react + @apollo/client/testing
• Mock数据生成：@graphql-codegen/typescript-mock-data插件

Schema定义 #

union Facet = FacetColor | FacetSize | FacetText | FacetRange

type ProductListResult {
  facets: [Facet]
}

生成的Mock代码 #

aProductListResult #

export const aProductListResult = (overrides?: Partial<ProductListResult>, _relationshipsToOmit: Set<string> = new Set()): { __typename: 'ProductListResult' } & ProductListResult => {
    const relationshipsToOmit: Set<string> = new Set(_relationshipsToOmit);
    relationshipsToOmit.add('ProductListResult');
    return {
        __typename: 'ProductListResult',
        facets: overrides && overrides.hasOwnProperty('facets') ? overrides.facets! : [relationshipsToOmit.has('FacetColor') ? {} as FacetColor : aFacetColor({}, relationshipsToOmit)],
    };
};

aFacetColor #

export const aFacetColor = (overrides?: Partial<FacetColor>, _relationshipsToOmit: Set<string> = new Set()): { __typename: 'FacetColor' } & FacetColor => {
    const relationshipsToOmit: Set<string> = new Set(_relationshipsToOmit);
    relationshipsToOmit.add('FacetColor');
    return {
        __typename: 'FacetColor',
        id: overrides && overrides.hasOwnProperty('id') ? overrides.id! : 'est',
        label: overrides && overrides.hasOwnProperty('label') ? overrides.label! : 'magnam',
        selectedCount: overrides && overrides.hasOwnProperty('selectedCount') ? overrides.selectedCount! : 2694,
        values: overrides && overrides.hasOwnProperty('values') ? overrides.values! : [relationshipsToOmit.has('FacetColorItem') ? {} as FacetColorItem : aFacetColorItem({}, relationshipsToOmit)],
    };
};

问题现象 #

调用aProductListResult生成的ProductListResult对象中，facets属性包含由aFacetColor生成的完整FacetColor对象（带有id、label等属性），但将该Mock数据传入Apollo的MockedProvider后，FacetColor仅保留{ __typename: 'FacetColor' }，其余属性全部丢失。

测试非联合类型的Mock数据时无此问题，推测是Schema中Facet联合类型导致MockedProvider无法正确解析。

MockedProvider使用方式 #

export const productListMock = () => {
  return {
    request: {
      query: ProductsDocument,
      variables: {
        params: {
          url: '/no/dame/kolleksjon/nyheter/',
          limit: 30,
          sort: 'NEWEST_FIRST',
          facetFilter: [],
          skip: 0,
          hiddenFacet: ['perferendis'],
          productRules: 'similique',
        },
      },
    },
    result: {
      data: {
        products: aProductListResult({ products: Array(30).fill(aProduct()) }),
      },
    },
  };
};

// 单元测试代码
<MockedApolloProvider mocks={[productListMock()]}>
    <ProductListPage />
</MockedApolloProvider>

请求排查思路 #

已花费数小时搜索解决方案未果，希望能得到针对该问题的排查方向或解决建议。

内容的提问来源于stack exchange，提问作者Kim Vu