使用 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>)',
      ],
    }),
  },
};

确实应该有一种内置的方法来处理这个问题，但是♂️