如何使用Apollo Mock Provider测试含随机UUID变量的mutation？

问题根因 #

组件运行时调用uuid()生成的随机值和Mock配置里提前调用uuid()生成的值完全不同，Apollo MockedProvider默认会精确匹配所有请求变量，因此无法命中对应的mock响应。

方案1：使用Apollo内置模糊匹配器（最简方案） #

Apollo官方测试工具提供了任意值匹配能力，无需匹配随机生成的id：

1. 引入匹配工具

import { MockedProvider, anything } from '@apollo/client/testing';

2. 修改mock配置

{
  request: {
    query: CREATE_MENU_PRODUCTS,
    variables: {
      menuId: menuId,
      id: anything(), // 任意id值都可以匹配
      productId: '4b1b6048-6cb1-46e0-ab4d-80fd11ebeacb',
    },
  },
  result: {
    // 原有返回结果配置保持不变
  },
}

方案2：固定uuid返回值 #

如果你的测试需要验证id参数被正确传递，可以mock uuid库，固定生成的值：
以Jest框架为例，在测试文件顶部添加如下代码：

const TEST_FIXED_UUID = '123e4567-e89b-12d3-a456-426614174000';
// 根据你实际引入的uuid版本调整，比如你用的是v4就写v4，v1就写v1
jest.mock('uuid', () => ({ v4: () => TEST_FIXED_UUID }));

然后把mock配置里的id替换为这个固定值即可：

variables: {
  menuId: menuId,
  id: TEST_FIXED_UUID,
  productId: '4b1b6048-6cb1-46e0-ab4d-80fd11ebeacb',
}

方案3：自定义请求匹配逻辑 #

如果需要更灵活的匹配规则，可以把request字段改为判断函数：

{
  request: (operation) => {
    return (
      operation.query === CREATE_MENU_PRODUCTS &&
      operation.variables.menuId === menuId &&
      operation.variables.productId === '4b1b6048-6cb1-46e0-ab4d-80fd11ebeacb'
    );
  },
  result: {
    // 原有返回结果配置保持不变
  },
}

内容的提问来源于stack exchange，提问作者Eileen De Guzman