通过 apollo 客户端测试使用查询和订阅的反应组件

Posted 2023-03-10

【中文标题】通过 apollo 客户端测试使用查询和订阅的反应组件

【英文标题】：test react component that use query and subscription with apollo client

【发布时间】：2021-05-28 04:20:43

【问题描述】：

有没有人有关于的提示？似乎当您将 <MockedProvider /> 组件与 mocks 和 link 道具一起使用时，它只是忽略了模拟。 感谢您的帮助！

【参考方案1】：

除非你有充分的理由，否则你不应该弄乱 MockedProvdier 的 link 属性。 MockedProvider 中使用的默认链接是MockLink，它管理为给定查询生成模拟的逻辑。像这样对apollo docs 中给出的示例进行建模，它应该可以工作：

import TestRenderer from 'react-test-renderer';
import  MockedProvider  from '@apollo/client/testing';
import  GET_DOG_QUERY, Dog  from './dog';

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

it('renders without error', () => 
  const component = TestRenderer.create(
    <MockedProvider mocks=mocks addTypename=false>
      <Dog name="Buck" />
    </MockedProvider>,
  );

  const tree = component.toJSON();
  expect(tree.children).toContain('Loading...');
);