如何在Cypress v13中模拟GraphQL Subscription为单次返回的查询？

可以实现，无需直接处理WebSocket协议，从React Apollo客户端层面拦截订阅逻辑更简单，以下是两种实用方案：

方案1：重写Apollo客户端的subscribe方法 #

通过Cypress获取页面的Apollo客户端实例，重写其订阅方法，直接返回包含模拟数据的一次性Observable：

cy.window().then((win) => {
  const client = win.apolloClient; // 需确保应用在测试环境把client挂载到window
  const originalSubscribe = client.subscribe;

  client.subscribe = (options) => {
    // 根据订阅名称匹配目标操作
    const subscriptionName = options.query.definitions[0].name.value;
    if (subscriptionName === '你的订阅名称') {
      return new win.ApolloClient.Observable((observer) => {
        observer.next({ 
          data: { 
            // 填入你的模拟数据结构
            exampleSubscription: { id: '1', content: '模拟订阅数据' }
          } 
        });
        observer.complete(); // 立即完成，只返回一次数据
      });
    }
    // 非目标订阅保留原逻辑
    return originalSubscribe(options);
  };
});

方案2：Stub React Apollo的useSubscription钩子 #

如果组件使用useSubscription钩子，可以直接拦截这个钩子返回模拟结果：

cy.window().then((win) => {
  const { useSubscription } = win.require('@apollo/client');
  const originalUseSubscription = useSubscription;

  cy.stub(win.require('@apollo/client'), 'useSubscription').callsFake((query, options) => {
    const subscriptionName = query.definitions[0].name.value;
    if (subscriptionName === '你的订阅名称') {
      return {
        data: { /* 模拟数据 */ },
        loading: false,
        error: undefined
      };
    }
    return originalUseSubscription(query, options);
  });
});

前置准备 #

在应用代码的测试环境中，将Apollo客户端实例挂载到window对象，方便Cypress访问：

// 应用初始化代码
if (process.env.NODE_ENV === 'test') {
  window.apolloClient = apolloClientInstance;
}

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