react-app-rewired环境下如何针对Apollo Client配置transformIgnorePatterns

要仅针对Apollo Client配置Jest的transformIgnorePatterns，同时避免其他模块（如CSS文件）的转译错误，可按以下步骤操作：

1. 调整Jest的转译忽略规则 #

修改你的Jest配置（通过config-overrides.js适配react-app-rewired，或独立的jest.config.js），使用负向前瞻正则指定仅转译@apollo/client相关模块，忽略其他node_modules内容：

方式一：通过config-overrides.js配置（适配react-app-rewired） #

module.exports = {
  jest: function(config) {
    // 只让Jest转译@apollo/client，忽略其他node_modules模块
    config.transformIgnorePatterns = [
      '/node_modules/(?!(@apollo/client)/)'
    ];
    
    // 配置CSS文件的mock处理，避免语法错误
    config.moduleNameMapper = {
      ...config.moduleNameMapper,
      '\\.(css|less)$': 'identity-obj-proxy'
    };
    
    return config;
  }
};

方式二：独立jest.config.js配置 #

module.exports = {
  // 保留原有的其他Jest配置
  transformIgnorePatterns: [
    '/node_modules/(?!(@apollo/client)/)'
  ],
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy'
  }
};

2. 安装必要依赖 #

为了正确mock CSS文件，需安装identity-obj-proxy：

npm install identity-obj-proxy --save-dev

原理说明 #

• /(?!(@apollo/client)/)是正则的负向前瞻断言，意思是：node_modules目录下，除了@apollo/client及其子模块外，其他内容都跳过转译。这样Jest会处理@apollo/client/testing的ES模块代码，解决MockedProvider返回undefined的问题。
• moduleNameMapper配置让Jest用identity-obj-proxymock所有CSS导入，避免解析样式文件时出现SyntaxError。

内容的提问来源于stack exchange，提问作者pmiranda