javascript - 查询字符串模块中的 stringify 在 Jest 测试中未按预期工作

Question

我正在 Jest 中编写单元测试。

在我正在测试的单元中导入

import queryString from 'query-string'

它正在执行代码:

queryString.stringify(ids)

其中 ids 是以下格式的数组:

[{ id: '123' },{ id: '321' }] 

此代码在我部署的网页中运行时运行良好，但在 JEST 测试中它给出以下输出:

id=%5Bobject%20Object%5D&id=%5Bobject%20Object%5D

而浏览器中的相同代码给出:

id=123&id=321

根据 query-string 的要求模块，我使用的是 Node > 6 的版本。

我还添加了:

/* jest commonjs */

到我的测试文件的顶部作为查询字符串目标 Node 。

此外，我尝试在 stringify 中设置各种选项但没有效果。

谁能告诉我为什么我在这些不同的环境中得到不同的结果以及如何让我的测试发挥作用？即不将字符串呈现为“%5Bobject%20”。

当然，我可以实现我自己的 stringify 方法，但这个库就是为此而构建的!

Answer 1

您能否定义预期的行为是什么？

根据 documentation ，stringify() 将对象转换为查询。由于您传递的是 ids(元素数组)，因此可能会出现不同的行为。

请注意，在 javascript 中，数组是一个以数字为键的对象，因此 [ { id: '123' }, { id: '456' } ] 实际上看起来像 { '0': { 'id': '123' }, '1': { 'id': '456' } } (看看Object.keys数组，您会看到它是 ['0','1'])。

话虽这么说，queryString 所做的是将每对键值转换为 key=value，其中 key 和 value > 已被“字符串化”(我假设通过 String 构造函数)。由于该值是一个对象，因此它返回您所看到的内容(实际上，String({}) 是 [object Object]。我所期望的(并且我因此，我确实从对象数组的字符串化中得到了类似于 0=[object Object]&1=[object Object] (方括号转换为 %5B 和 %5D 以及空格到 %20)。

我真的不知道 questionId 来自哪里，因此应该提供更多的上下文(例如，显示正在字符串化的实际对象可能很有用)，但是，为了说明这一点，为了避免您的对象被转换为 [object Object] 您应该使用键提取器，它返回您实际想要显示为值的值。

因此，例如，如果您的数组如上所述，并且您想要获得的结果是 0=123&1=456，您将执行以下操作:

const ids = [ {id: '123'}, {id: '456'} ];
queryString.stringify(ids.map(v => v.id))

相反，如果预期行为是 id=123&id=456，则需要将数组转换为对象 { id: ['123','456'] }.您可以通过以下方式做到这一点

const ids = [ {id: '123'}, {id: '456'} ];
queryString.stringify({ id: ids.reduce( (c,v) => c.concat(v.id), []) })

因此，您需要将原始 ids 数组转换为适合 stringify 的对象。