React集成Azure MSAL后Jest测试报错：Unexpected token 'export'

我正在开发一个React应用，已集成用于Azure身份验证的MSAL库。配置Jest运行测试用例时出现以下错误：

export { MsalConsumer, MsalContext } from './MsalContext.js';
^^^^^^

SyntaxError: Unexpected token 'export'

   7 |   RedirectRequest,
   8 | } from '@azure/msal-browser'
>  9 | import {MsalProvider} from '@azure/msal-react'
     | ^
  10 |
  11 | // Config object to be passed to Msal on creation
  12 | export const msalConfig: Configuration = {

当前使用的jest.config.ts配置如下：

const esModules = ['@azure/msal-react', '@azure/msal-browser'].join('|');

export default {
    preset: 'ts-jest',
    transform: { '^.+\\.ts?$': 'ts-jest' },
    clearMocks: true,
    collectCoverage: true,
    testEnvironment: "jsdom",
    coverageDirectory: "<rootDir>/coverage",
    transformIgnorePatterns: [
        "<rootDir>/node_modules/(?!(@azure/msal-react)).*\\.ts$",
    ],

    testPathIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules}`],
    coverageReporters: ["json", "lcov", "html"],

}

问题原因及修复方案 #

错误核心原因是@azure/msal-react和@azure/msal-browser采用ES模块语法，但Jest默认不转换node_modules下的文件，导致无法识别export语法。同时当前配置存在两处语法/逻辑问题：

1. transformIgnorePatterns仅排除了@azure/msal-react，遗漏了同属ES模块的@azure/msal-browser
2. testPathIgnorePatterns的正则表达式括号未闭合，存在语法错误

修正后的jest.config.ts如下：

const esModules = ['@azure/msal-react', '@azure/msal-browser'].join('|');

export default {
    preset: 'ts-jest',
    transform: { 
        '^.+\\.tsx?$': 'ts-jest' // 新增.tsx支持，适配React组件文件
    },
    clearMocks: true,
    collectCoverage: true,
    testEnvironment: "jsdom",
    coverageDirectory: "<rootDir>/coverage",
    transformIgnorePatterns: [
        `<rootDir>/node_modules/(?!(${esModules})).+` // 同时包含两个MSAL库
    ],
    testPathIgnorePatterns: [
        `<rootDir>/node_modules/(?!${esModules})` // 闭合正则括号
    ],
    coverageReporters: ["json", "lcov", "html"],
}

额外说明 #

• 若项目中存在.tsx格式的React组件，必须在transform配置中添加对tsx的支持，否则Jest无法解析JSX语法
• transformIgnorePatterns的作用是告知Jest哪些node_modules下的文件需要被转换，这里通过正则表达式排除指定的MSAL库，让ts-jest处理它们的ES模块语法

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