Apollo Client 中 MockedProvider 对 NaN 变量的处理问题解析

问题背景

在 Apollo Client 的测试环境中，MockedProvider 是一个常用的工具，它允许开发者为 GraphQL 查询提供预设响应。然而，当测试用例中涉及到特殊数值类型时，特别是 NaN（非数字）值时，MockedProvider 的报错信息会出现不准确的情况。

问题现象

当开发者在测试中将 NaN 作为变量传递给 GraphQL 查询时，MockedProvider 生成的错误信息会将 NaN 转换为 null 显示。这种转换使得开发者难以快速识别问题根源，因为错误信息中显示的变量值与实际传递的值不符。

技术原理

这个问题的根源在于 JavaScript 的 JSON.stringify() 方法对特殊值的处理机制。根据 ECMAScript 规范，JSON.stringify() 在遇到 NaN 时会自动将其转换为 null，这是因为 JSON 规范本身不支持 NaN 这种特殊数值类型。

类似的情况也发生在 undefined 值上，但 Apollo Client 团队已经对 undefined 做了特殊处理，将其转换为字符串 "" 以保持调试信息的准确性。

解决方案

Apollo Client 团队已经通过 PR #12404 解决了这个问题。解决方案的核心思想是：

1. 在将变量转换为字符串之前，先检查其中是否包含 NaN 值
2. 如果发现 NaN，则使用特殊标记（如 ""）来表示，而不是依赖 JSON.stringify() 的默认行为
3. 这样处理后，错误信息就能准确反映实际传递的变量值

实际应用

在实际测试场景中，这个改进特别有用。例如，当测试组件处理错误输入时，开发者可能需要验证组件对 NaN 值的处理逻辑。改进后的 MockedProvider 能够提供更准确的调试信息，帮助开发者快速定位问题。

最佳实践

基于这个问题的解决，我们可以总结出一些测试实践建议：

1. 当测试边界条件时，特别是涉及特殊数值类型时，要特别注意 MockedProvider 的报错信息
2. 对于数值型变量，考虑测试各种可能的输入情况，包括正常数字、NaN、Infinity 等
3. 如果遇到变量值在错误信息中显示不正确的情况，可以考虑是否是 JSON 序列化导致的转换问题

总结

Apollo Client 团队对 MockedProvider 的这次改进，体现了对开发者体验的重视。通过正确处理 NaN 值的显示问题，使得测试过程中的调试更加直观和高效。这也提醒我们，在构建测试工具时，需要考虑各种边界情况，特别是那些在 JSON 序列化过程中可能丢失或转换的特殊值。

对于使用 Apollo Client 进行测试的开发者来说，这个改进将显著提升测试的可靠性和调试效率，特别是在处理复杂数据类型和边界条件时。