查詢字符串模塊中的字符串化在 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

根據查詢字符串模塊的要求，我使用的是 node > 6 版本。

我還補充道：

/* jest commonjs */

到我的測試文件的頂部作為查詢字符串目標節點。

此外，我嘗試在stringify 中設置各種選項，但無濟於事。

誰能告訴我為什么我在這些不同的環境中得到不同的結果以及如何讓我的測試工作？ 即不將字符串呈現為“%5Bobject%20”。

當然，我可以實現我自己的 stringify 方法，但是這個庫就是為做到這一點而構建的！

Answer 1

你能定義一下預期的行為嗎？

根據文檔， stringify()將對象轉換為查詢。 由於您傳遞的是ids元素數組，因此您可能會獲得不同的可能行為。

請注意，在 javascript 中，數組是一個以數字為鍵的對象，因此[ { id: '123' }, { id: '456' } ]實際上看起來像{ '0': { 'id': '123' }, '1': { 'id': '456' } } （看看數組的Object.keys ，你會看到它是['0','1'] ）。

所以，話雖如此， queryString 正在做的是將每對鍵值轉換為key=value ，其中key和values都已“字符串化”（我假設通過 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的對象。

Answer 2

你可以使用這個 npm 包https://www.npmjs.com/package/qs
它有一個有效的qs.stringify