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

edqdpe6u  于 2023-01-22  发布在  Babel
关注(0)|答案(1)|浏览(224)

我有一个CRA项目,我使用react-intl包及其babel-plugin-formatjs(自动生成用于翻译的消息ID)。
我围绕babel-plugin-formatjs创建了 Package 器,它可以获取一些关于项目和
为了在CRA中使用自定义babel插件,我使用customize-cra包,在根文件夹中有一个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()。我如何让jest使用想要的babel插件?或者,我如何传递jest额外的插件而不弹出或忽略CRA的默认createJestConfig()
我试着用定制的babel插件在根文件夹中创建一个babel.config.js文件,但是jest没有发现。

zed5wv10

zed5wv101#

我想这可能对你有帮助-https://github.com/arackaf/customize-cra/blob/master/api.md#usebabelrc
由于addBabelPlugin不影响测试配置,因此useBabelRc选择Babel配置文件并覆盖默认CRA的Babel配置

相关问题