Jest 導入模塊，TypeError：無法讀取未定義的屬性（讀取“utf16le”）

Question

賞金將在 2 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Pajke想讓更多人關注這個問題。

我正在嘗試使用 Jest 測試一個 React 組件，該組件導入一個名為“Siwe”的模塊，該模塊使用 Ethereum 登錄。

我的 Jest 配置如下所示：

module.exports = {
  moduleNameMapper: {
    "module_name_(.*)":
      "<rootDir>/node_modules/apg-js/src/apg-conv-api/transformers.js",
  },
  transform: {
    "\\.[jt]sx?$": "babel-jest",
  },
  testEnvironment: "jsdom",
  transformIgnorePatterns: ['node_modules/(?!@wagmi)/"'],
};

我的測試代碼導入了一個反應組件，它具有以下導入：

import { SiweMessage } from "siwe";

如果我刪除導入，測試運行正常，但保留導入我得到以下堆棧跟蹤的錯誤

TypeError: Cannot read properties of undefined (reading 'utf16le')

  18 | import { signIn } from "next-auth/react";
  19 | import { AnimatePresence, motion } from "framer-motion";
> 20 | import { SiweMessage } from "siwe";
     | ^
  21 |
  22 | type Props = {};
  23 |

  at Object.utf16le [as decode] (node_modules/apg-js/src/apg-conv-api/transformers.js:801:21)
  at decode (node_modules/apg-js/src/apg-conv-api/converter.js:380:27)
  at Object.decode (node_modules/apg-js/src/apg-conv-api/converter.js:391:10)
  at new decode (node_modules/apg-js/src/apg-api/api.js:327:28)
  at Function.generateApi (node_modules/@spruceid/siwe-parser/dist/abnf.js:154:21)
  at Object.generateApi (node_modules/@spruceid/siwe-parser/dist/abnf.js:166:28)
  at Object.require (node_modules/@spruceid/siwe-parser/dist/parsers.js:18:16)
  at Object.require (node_modules/siwe/dist/client.js:37:23)
  at Object.require (node_modules/siwe/dist/siwe.js:17:14)
  at Object.<anonymous> (pages/playground.page.tsx:20:1)
  at Object.<anonymous> (__tests__/playground.test.tsx:2:1)

對於我的一生，我無法弄清楚問題是什么。

Answer 1

模塊node_modules/apg-js/src/apg-conv-api/transformers.js通過 jest 的轉換器。 Jest 將代碼包裝在破壞apg-conv-api/transformers.js的自執行函數中，因為它依賴於正確的this模塊內部引用。

但是根本問題在於不正確的transformIgnorePatterns ，因為我猜你想忽略除@wagmi之外的所有node_modules 的轉換，如果是，只需將其替換為：

{
  ...
  transformIgnorePatterns: ['node_modules/(?!@wagmi/)'],
}