使用 Mock Service Worker 时如何对 graphql 查询变量进行断言？

Posted 2023-02-21

【中文标题】使用 Mock Service Worker 时如何对 graphql 查询变量进行断言？

【英文标题】：How to make assertions on graphql query variables when using Mock Service Worker?

【发布时间】：2021-03-21 04:41:07

【问题描述】：

当我们使用模拟服务工作者 (MSW) 模拟 graphql 查询时，我们希望断言传递给查询的变量具有特定值。这超出了打字稿类型的类型验证。我们正在用 MSW 开玩笑。您是否监视 MSW 以做出这些断言？还是有其他方法可以期望req.variables 具有一定的价值。

graphql.query<SaveContent, SaveContentVariables>('SaveContent', (req, res, ctx) => 
    return res(
      ctx.data(
        saveContent: 
          success: true,
          id: req.variables.id,
          errors: [],
        ,
      )
    );
  )

【问题讨论】：

如果你将 SaveContentVariables 类型传递给 graphql.query 泛型函数，TypeScript 类型应该可以工作

见mswjs.io/docs/api/graphql/query#usage-with-typescript

我想检查这个值是一个特定的值而不是形状。所以它在数组中有这些项目，而不是它只是一个数组。

【参考方案1】：

Mock Service Worker 建议将您的请求断言基于 UI（在Request assertions 配方中了解更多信息）。在大多数情况下，如果您的请求/响应数据是正确的，那么您的 UI 在测试中就是正确的。相反的情况也是如此。尽可能断言数据驱动的 UI。

在您的情况下，您希望在请求中声明查询变量。考虑根据这些变量返回数据，这些变量稍后会产生相应的 UI。

当您发现绝对有必要在 UI 之外执行直接请求/响应断言时，请使用允许执行任意逻辑以响应各种 MSW 事件的Life-cycle events。例如，您可以通过以下方式在测试中声明请求变量：

const server = setupServer(...handlers)

it('saves the content', async () => 
  expect.assertions(1)

  server.on('request:match', (req) => 
    expect(req.variables).toEqual( id: 'abc-123' )
  )

  await performQuery(...)
)