如何设置 craco 配置来处理 transformIgnorePatterns 以进行测试？答案

【问题标题】：How to set craco config to handle `transformIgnorePatterns` for testing?如何设置 craco 配置来处理 transformIgnorePatterns 以进行测试？
【发布时间】：2023-02-17 00:54:16
【问题描述】：

为了在使用 Create React App 5 的项目中运行测试，我需要为一些未转换的依赖项设置 transformIgnorePatterns 属性。

我可以按如下方式从命令行执行此操作：

npm run test -- --transformIgnorePatterns "node_modules/(?!(swiper|ssr-window|dom7)/)"

我可以在弹出后通过在 package.json 中设置 jest 属性来做到这一点，如下所示：

{
  ...
  transformIgnorePatterns": [
    "[/\\\\]node_modules[/\\\\](?!(swiper|ssr-window|dom7/)\\.(js|jsx|mjs|cjs|ts|tsx)$",
    "^.+\\.module\\.(css|sass|scss)$"
  ],
  ...
}

我一直在尝试通过在 craco.config.js 中设置 babel 和 jest 属性的各种组合来对 craco7.0.0-alpha.8（需要支持 CRA 版本 5 及更高版本）做同样的事情，但它们似乎不起作用根本（我一直看到 SyntaxError: Unexpected token 'export' 错误来解决我需要新设置的问题）.

module.exports = {
  babel: {
    transformIgnorePatterns: [
    "/node_modules/(?!(swiper|ssr-window|dom7))"
    ],
  },
  jest: {
    transformIgnorePatterns: [
      "[/\\\\]node_modules[/\\\\](?!(swiper|ssr-window|dom7/)",
      "^.+\\.module\\.(css|sass|scss)$"
    ]
  }
}

在 craco 配置中设置 transformIgnorePatterns 属性的正确方法是什么，以便在运行测试时正确编译必要的库？

【问题讨论】：

不是一个解决方案，但我们只有十几个提交，所以我切换到 vite（因为它似乎是用 cra 做到这一点的唯一方法是弹出应用程序......）

标签： babeljs create-react-app ts-jest babel-jest craco

【解决方案1】：

根据 official documentation，标准的 jest 配置位于 jest.configure 下。所以你的配置应该是这个样子

module.exports = {
  ...
  jest: {
    configure: {
      transformIgnorePatterns: [
        "[/\\]node_modules[/\\](?!(swiper|ssr-window|dom7/)",
        "^.+\.module\.(css|sass|scss)$"
      ]
    }
  }
}

（我可以验证这对 resetMocks 属性有效，但我没有测试 transformIgnorePatterns）。

【讨论】：