在Create React App项目中配置Jest使用自定义Babel插件

安全阿岳

2026-8-3

解决CRA项目中Jest不加载自定义Babel插件（babel-plugin-formatjs）的问题

问题场景

在CRA项目中使用react-intl和babel-plugin-formatjs自动生成翻译消息ID，通过customize-cra在config-overrides.js中配置了自定义Babel插件后，Build流程中插件可正常运行，但执行test命令时，Jest抛出错误[@formatjs/intl] An id must be provided to format a message.，核心原因是Jest未加载该自定义插件。

核心原因

当前config-overrides.js仅修改了Webpack的Babel配置，未同步更新Jest的Babel配置，而CRA默认的Jest配置不会自动继承Webpack的Babel插件规则。

解决方案

方案1：让插件同时作用于Webpack和Jest（推荐）

修改config-overrides.js的导出逻辑，直接用override包裹所有配置项，addBabelPlugin会自动将插件同步应用到Webpack和Jest的Babel配置中：

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

function getMyCustomBabelPlugin() {
  // 提取项目信息并返回插件配置
  return ['babel-plugin-formatjs', { /* 你的自定义配置 */ }];
}

// 直接导出override结果，同时覆盖Webpack和Jest配置
module.exports = override(
  // ...其他Webpack配置项
  addBabelPlugin(getMyCustomBabelPlugin()),
);

方案2：单独为Jest配置Babel插件

如果需要单独控制Jest的配置规则，可以使用overrideJest方法手动添加插件：

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

function getMyCustomBabelPlugin() {
  return ['babel-plugin-formatjs', { /* 你的自定义配置 */ }];
}

module.exports = {
  webpack: override(
    // ...其他Webpack配置项
    addBabelPlugin(getMyCustomBabelPlugin()),
  ),
  jest: overrideJest((jestConfig) => {
    // 找到Jest的Babel转换配置，添加自定义插件
    jestConfig.transform['^.+\\.(js|jsx|ts|tsx)$'].options.plugins.push(getMyCustomBabelPlugin());
    return jestConfig;
  }),
};