使用 Yarn 門戶在 CRA 中 Jest 下的錯誤

Question

我有一個使用 Yarn 3 和 TypeScript 4 的 Create-React-App 5 項目。web 應用程序通過 Yarn 的portal:協議（不使用 Yarn 工作區）。

myRepo
├── myLib
│   ├── package.json
│   ├── yarn.lock
│   └── src
│       ├── index.js
│       └── macro.js
├── myApp
│   ├── package.json
│   ├── yarn.lock
│   └── src
│       ├── App.tsx
│       ├── App.test.tsx
│       └── index.tsx
└── yarnrc.yml

myApp/package.json使用如下門戶：

"dependencies": {
  "myLib": "portal:../myLib",

我的頂級紗線配置：

# yarnrc.yml
nodeLinker: node-modules

如果我用file:替換portal: ，一切正常。 即使使用portal: ， myApp中的yarn build和yarn start仍然可以正常工作，但是yarn test成為問題： /Users/luke/myRepo/myLib/src/index.js: The macro imported from "./macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros".

嗯？ 我當然不會嘗試對 Babel 宏做任何事情。 此外，這些東西在庫中，而不是應用程序本身。

發生了什么事，我該如何解決？

Answer 1

好吧，我想我已經想通了！

首先，CRA 包括babel-plugin-macros ( source )，它通過查找特定文件名（例如macro.js ）並將它們視為 Babel 宏 ( docs ) 來運行。 所以，如果我有一個文件myApp/src/macro.js ，它會以類似的方式出錯，但也適用於構建/啟動。

二、為什么只是Jest下的問題？ Jest 實際上是在轉換依賴項，Webpack 不知何故知道不這樣做。 通常這將是無關緊要的（除了減慢速度），但在這種情況下，Jest 的轉譯是問題所在，因為它錯誤地嘗試使用 Babel 宏解釋myLib （ myLib的作者當然從未打算這樣做）。

第三，為什么 Jest 首先要嘗試轉換位於myApp之外的其他庫？ 它當然不應該。 實際上，Jest 試圖轉換除明確排除的內容之外的所有內容，並且 CRA 下的排除默認為 ( source )：

transformIgnorePatterns: [
  '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
  '^.+\\.module\\.(css|sass|scss)$',
],

目的是包含應用程序本身並排除其依賴項。 這種方法有點假設myApp的所有依賴項都將位於node_modules下的某個node_modules ，這（PnP 除外）在nodeLinker: node-modules下將是一個特別合理的期望。 但是對於門戶，有一個指向myLib的符號鏈接，它（在解析其真實路徑后）不在任何node_modules下，因此與忽略模式不匹配。 因此，在此配置下，通過門戶訪問的依賴項不會從 Jest 轉換中排除。

解決方案

為了解決這個問題，將 Jest 配置為也排除項目根目錄下的任何內容，即添加：

'^(?!<rootDir>)'

由於我碰巧已經在使用 Craco，所以我可以：

// craco.config.js
module.exports = {
  jest: {
    configure: jestConfig => ({
      ...jestConfig,
      transformIgnorePatterns: [
        ...jestConfig.transformIgnorePatterns,
        '^(?!<rootDir>)',
      ],
    }),
  },
};

確實應該有一種內置的方法來處理這個問題，但是♂️