如何设置 jest 以在 create-react-app 项目中使用自定义 babel 插件？

Question

我有一个 CRA 项目，我使用react-intl package 及其babel-plugin-formatjs （自动生成用于翻译的消息 ID）。

我围绕babel-plugin-formatjs创建了包装器，它获取了一些关于项目的额外信息和

为了在 CRA 中使用自定义 babel 插件，我使用customize-cra package 和根文件夹中的config-overrides.js文件，如下所示：

const { override, addBabelPlugin } = require('customize-cra');

function getMyCustomBabelPlugin() {
  // extract some info and return the plugin config:
  return ['babel-plugin-formatjs', { ... // some custom config }]
}

module.exports = {
  webpack: override(
    ... // some overrides,
    addBabelPlugin(getMyCustomBabelPlugin()),
  ),
}

因此，每当我运行build命令时，babel 都会运行babel-plugin-formatjs （并将 id 添加到字符串以进行翻译）。

但是每当我想运行 CRA test命令时，jest 都不会获取 babel 配置。 我的一些测试呈现使用 react-intl 的组件，但出现错误： [@formatjs/intl] An id must be provided to format a message. 因为我的自定义插件没有运行。

我看到 CRA 在后台使用默认配置运行createJestConfig() 。 我怎样才能开玩笑地使用想要的 babel 插件？ 或者，如何在不弹出或忽略 CRA 的默认createJestConfig()的情况下传递额外的插件？

我尝试使用自定义 babel 插件在根文件夹中创建一个babel.config.js文件，但 jest 没有选择它。

Answer 1

我认为这可能对您有所帮助 - https://github.com/arackaf/customize-cra/blob/master/api.md#usebabelrc

因为 addBabelPlugin 不影响测试配置，所以 useBabelRc 选择 babel 配置文件并覆盖默认 CRA 的 babel 配置